diff --git a/src/App.tsx b/src/App.tsx
index 017957182..738820f8c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,46 +1,87 @@
-import classNames from 'classnames';
+//import classNames from 'classnames';
 
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
 
-import { PostsList } from './components/PostsList';
-import { PostDetails } from './components/PostDetails';
+//import { PostDetails } from './components/PostDetails';
 import { UserSelector } from './components/UserSelector';
+import { useEffect, useState } from 'react';
+import { User } from './types/User';
+import { getUsers } from './api/users';
 import { Loader } from './components/Loader';
+import { PostsList } from './components/PostsList/PostsList';
+import { Post } from './types/Post';
+import { getPosts } from './api/posts';
 
-export const App = () => (
-  <main className="section">
-    <div className="container">
-      <div className="tile is-ancestor">
-        <div className="tile is-parent">
-          <div className="tile is-child box is-success">
-            <div className="block">
-              <UserSelector />
-            </div>
+export const App = () => {
+  const [users, setUsers] = useState<User[]>([]);
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [notification, setNotification] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
-            <div className="block" data-cy="MainContent">
-              <p data-cy="NoSelectedUser">No user selected</p>
+  // #region load
+  useEffect(() => {
+    getUsers().then(setUsers);
+  }, []);
 
-              <Loader />
+  useEffect(() => {
+    if (selectedUser) {
+      setIsLoading(true);
+      setPosts([]);
+      setNotification('');
 
-              <div
-                className="notification is-danger"
-                data-cy="PostsLoadingError"
-              >
-                Something went wrong!
-              </div>
+      getPosts(selectedUser.id)
+        .then(res => {
+          if (res.length === 0) {
+            setNotification('is-warning');
+          }
 
-              <div className="notification is-warning" data-cy="NoPostsYet">
-                No posts yet
+          setPosts(res);
+        })
+        .catch(() => setNotification('is-danger'))
+        .finally(() => setIsLoading(false));
+    }
+  }, [selectedUser]);
+  // #endregion
+
+  return (
+    <main className="section">
+      <div className="container">
+        <div className="tile is-ancestor">
+          <div className="tile is-parent">
+            <div className="tile is-child box is-success">
+              <div className="block">
+                <UserSelector users={users} onSelect={setSelectedUser} />
               </div>
 
-              <PostsList />
+              <div className="block" data-cy="MainContent">
+                {!isLoading && posts.length === 0 && !notification && (
+                  <p data-cy="NoSelectedUser">No user selected</p>
+                )}
+                {!isLoading && posts.length > 0 && <PostsList posts={posts} />}
+                {isLoading && <Loader />}
+
+                {notification === 'is-danger' && (
+                  <div
+                    className="notification is-danger"
+                    data-cy="PostsLoadingError"
+                  >
+                    Something went wrong!
+                  </div>
+                )}
+
+                {notification === 'is-warning' && (
+                  <div className="notification is-warning" data-cy="NoPostsYet">
+                    No posts yet
+                  </div>
+                )}
+              </div>
             </div>
           </div>
-        </div>
 
-        <div
+          {/*<div
           data-cy="Sidebar"
           className={classNames(
             'tile',
@@ -53,8 +94,9 @@ export const App = () => (
           <div className="tile is-child box is-success ">
             <PostDetails />
           </div>
+          </div>*/}
         </div>
       </div>
-    </div>
-  </main>
-);
+    </main>
+  );
+};
diff --git a/src/api/posts.tsx b/src/api/posts.tsx
new file mode 100644
index 000000000..a6a1739ec
--- /dev/null
+++ b/src/api/posts.tsx
@@ -0,0 +1,6 @@
+import { Post } from '../types/Post';
+import { client } from '../utils/fetchClient';
+
+export const getPosts = (userId: number) => {
+  return client.get<Post[]>(`/posts?userId=${userId}`);
+};
diff --git a/src/api/users.tsx b/src/api/users.tsx
new file mode 100644
index 000000000..386bfacd5
--- /dev/null
+++ b/src/api/users.tsx
@@ -0,0 +1,6 @@
+import { User } from '../types/User';
+import { client } from '../utils/fetchClient';
+
+export const getUsers = () => {
+  return client.get<User[]>(`/users`);
+};
diff --git a/src/components/PostsList.tsx b/src/components/PostsList.tsx
deleted file mode 100644
index cf90f04b0..000000000
--- a/src/components/PostsList.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react';
-
-export const PostsList: React.FC = () => (
-  <div data-cy="PostsList">
-    <p className="title">Posts:</p>
-
-    <table className="table is-fullwidth is-striped is-hoverable is-narrow">
-      <thead>
-        <tr className="has-background-link-light">
-          <th>#</th>
-          <th>Title</th>
-          {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-          <th> </th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <tr data-cy="Post">
-          <td data-cy="PostId">17</td>
-
-          <td data-cy="PostTitle">
-            fugit voluptas sed molestias voluptatem provident
-          </td>
-
-          <td className="has-text-right is-vcentered">
-            <button
-              type="button"
-              data-cy="PostButton"
-              className="button is-link is-light"
-            >
-              Open
-            </button>
-          </td>
-        </tr>
-
-        <tr data-cy="Post">
-          <td data-cy="PostId">18</td>
-
-          <td data-cy="PostTitle">
-            voluptate et itaque vero tempora molestiae
-          </td>
-
-          <td className="has-text-right is-vcentered">
-            <button
-              type="button"
-              data-cy="PostButton"
-              className="button is-link"
-            >
-              Close
-            </button>
-          </td>
-        </tr>
-
-        <tr data-cy="Post">
-          <td data-cy="PostId">19</td>
-          <td data-cy="PostTitle">adipisci placeat illum aut reiciendis qui</td>
-
-          <td className="has-text-right is-vcentered">
-            <button
-              type="button"
-              data-cy="PostButton"
-              className="button is-link is-light"
-            >
-              Open
-            </button>
-          </td>
-        </tr>
-
-        <tr data-cy="Post">
-          <td data-cy="PostId">20</td>
-          <td data-cy="PostTitle">doloribus ad provident suscipit at</td>
-
-          <td className="has-text-right is-vcentered">
-            <button
-              type="button"
-              data-cy="PostButton"
-              className="button is-link is-light"
-            >
-              Open
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-);
diff --git a/src/components/PostsList/PostsList.tsx b/src/components/PostsList/PostsList.tsx
new file mode 100644
index 000000000..a75e94002
--- /dev/null
+++ b/src/components/PostsList/PostsList.tsx
@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { Post } from '../../types/Post';
+
+interface Props {
+  posts: Post[];
+}
+
+export const PostsList: React.FC<Props> = ({ posts }) => {
+  const [selectedPost, setSelectedPost] = useState<Post | null>(null);
+
+  const handleOnClick = (post: Post) => {
+    setSelectedPost(prevPost =>
+      prevPost && prevPost.id === post.id ? null : post,
+    );
+  };
+
+  return (
+    <div data-cy="PostsList">
+      <p className="title">Posts:</p>
+
+      <table className="table is-fullwidth is-striped is-hoverable is-narrow">
+        <thead>
+          <tr className="has-background-link-light">
+            <th>#</th>
+            <th>Title</th>
+            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+            <th> </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {posts.map(post => (
+            <tr data-cy="Post" key={post.id}>
+              <td data-cy="PostId">{post.id}</td>
+
+              <td data-cy="PostTitle">{post.title}</td>
+
+              <td className="has-text-right is-vcentered">
+                <button
+                  type="button"
+                  data-cy="PostButton"
+                  className={classNames('button is-link', {
+                    'is-light': !selectedPost || selectedPost.id !== post.id,
+                  })}
+                  onClick={() => handleOnClick(post)}
+                >
+                  {!selectedPost || selectedPost.id !== post.id
+                    ? 'Open'
+                    : 'Close'}
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
diff --git a/src/components/PostsList/index.js b/src/components/PostsList/index.js
new file mode 100644
index 000000000..41c5eee64
--- /dev/null
+++ b/src/components/PostsList/index.js
@@ -0,0 +1 @@
+export * from './PostsList';
diff --git a/src/components/UserSelector.tsx b/src/components/UserSelector.tsx
deleted file mode 100644
index c89442841..000000000
--- a/src/components/UserSelector.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-
-export const UserSelector: React.FC = () => {
-  return (
-    <div data-cy="UserSelector" className="dropdown is-active">
-      <div className="dropdown-trigger">
-        <button
-          type="button"
-          className="button"
-          aria-haspopup="true"
-          aria-controls="dropdown-menu"
-        >
-          <span>Choose a user</span>
-
-          <span className="icon is-small">
-            <i className="fas fa-angle-down" aria-hidden="true" />
-          </span>
-        </button>
-      </div>
-
-      <div className="dropdown-menu" id="dropdown-menu" role="menu">
-        <div className="dropdown-content">
-          <a href="#user-1" className="dropdown-item">
-            Leanne Graham
-          </a>
-          <a href="#user-2" className="dropdown-item is-active">
-            Ervin Howell
-          </a>
-          <a href="#user-3" className="dropdown-item">
-            Clementine Bauch
-          </a>
-          <a href="#user-4" className="dropdown-item">
-            Patricia Lebsack
-          </a>
-          <a href="#user-5" className="dropdown-item">
-            Chelsey Dietrich
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/UserSelector/UserSelector.tsx b/src/components/UserSelector/UserSelector.tsx
new file mode 100644
index 000000000..524ca0f89
--- /dev/null
+++ b/src/components/UserSelector/UserSelector.tsx
@@ -0,0 +1,71 @@
+import classNames from 'classnames';
+import React, { useRef, useState } from 'react';
+import { User } from '../../types/User';
+
+interface Props {
+  users: User[];
+  onSelect: (user: User) => void;
+}
+
+export const UserSelector: React.FC<Props> = ({ users, onSelect }) => {
+  const [isActive, setIsActive] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+
+  const handleOnSelect = (user: User) => {
+    setIsActive(false);
+    setSelectedUser(user);
+    onSelect(user);
+  };
+
+  const handleOnBlur = (event: React.FocusEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.relatedTarget as Node)
+    ) {
+      setIsActive(false);
+    }
+  };
+
+  return (
+    <div
+      data-cy="UserSelector"
+      className={classNames('dropdown', { 'is-active': isActive })}
+      ref={dropdownRef}
+    >
+      <div className="dropdown-trigger">
+        <button
+          type="button"
+          className="button"
+          aria-haspopup="true"
+          aria-controls="dropdown-menu"
+          onClick={() => setIsActive(!isActive)}
+          onBlur={handleOnBlur}
+        >
+          <span>{selectedUser ? selectedUser.name : 'Choose a user'}</span>
+
+          <span className="icon is-small">
+            <i className="fas fa-angle-down" aria-hidden="true" />
+          </span>
+        </button>
+      </div>
+
+      <div className="dropdown-menu" id="dropdown-menu" role="menu">
+        <div className="dropdown-content">
+          {users.map(user => (
+            <a
+              key={user.id}
+              href={`#user-${user.id}`}
+              className={classNames('dropdown-item', {
+                'is-active': selectedUser && user.id === selectedUser.id,
+              })}
+              onClick={() => handleOnSelect(user)}
+            >
+              {user.name}
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/UserSelector/index.js b/src/components/UserSelector/index.js
new file mode 100644
index 000000000..b4431162a
--- /dev/null
+++ b/src/components/UserSelector/index.js
@@ -0,0 +1 @@
+export * from './UserSelector';