diff --git a/package-lock.json b/package-lock.json
index 753ec12..3d16b42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-icons": "^4.3.1",
-        "react-query": "^4.0.0-alpha.18",
+        "react-query": "^4.0.0-beta.3",
         "react-router-dom": "^6.1.1"
       },
       "devDependencies": {
@@ -394,11 +394,11 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.16.3",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz",
-      "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
+      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.13.11"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -531,6 +531,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "node_modules/@uidotdev/react-query-api": {
       "version": "0.1.18",
       "resolved": "https://registry.npmjs.org/@uidotdev/react-query-api/-/react-query-api-0.1.18.tgz",
@@ -2217,20 +2222,22 @@
       }
     },
     "node_modules/react-query": {
-      "version": "4.0.0-alpha.18",
-      "resolved": "https://registry.npmjs.org/react-query/-/react-query-4.0.0-alpha.18.tgz",
-      "integrity": "sha512-yeMFhn+1tBCxFnQnvK2mW9j0jXgrBKZWXsjObGGyNZDrgTPzkjcF+iW6KBXimVRLg4DH/3Knjw5hj8WmPLbDNg==",
+      "version": "4.0.0-beta.23",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-4.0.0-beta.23.tgz",
+      "integrity": "sha512-e6mNBVAYGy0M1OwX0mhRB/lCkOedKeqTUrbPjNCqvm8hQGUsJJobqfHVvTv8o6JJaOO2MFcxKF4vZM+PEKbHZA==",
       "dependencies": {
-        "@babel/runtime": "^7.5.5",
+        "@babel/runtime": "^7.17.9",
+        "@types/use-sync-external-store": "^0.0.3",
         "broadcast-channel": "^3.4.1",
-        "match-sorter": "^6.0.2"
+        "match-sorter": "^6.0.2",
+        "use-sync-external-store": "^1.1.0"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       },
       "peerDependenciesMeta": {
         "react-dom": {
@@ -2299,9 +2306,9 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "node_modules/remove-accents": {
       "version": "0.4.2",
@@ -2633,6 +2640,14 @@
         "detect-node": "^2.0.4"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -3059,11 +3074,11 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.16.3",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz",
-      "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
+      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
       "requires": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.13.11"
       }
     },
     "@babel/template": {
@@ -3181,6 +3196,11 @@
         "@types/node": "*"
       }
     },
+    "@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "@uidotdev/react-query-api": {
       "version": "0.1.18",
       "resolved": "https://registry.npmjs.org/@uidotdev/react-query-api/-/react-query-api-0.1.18.tgz",
@@ -4352,13 +4372,15 @@
       "requires": {}
     },
     "react-query": {
-      "version": "4.0.0-alpha.18",
-      "resolved": "https://registry.npmjs.org/react-query/-/react-query-4.0.0-alpha.18.tgz",
-      "integrity": "sha512-yeMFhn+1tBCxFnQnvK2mW9j0jXgrBKZWXsjObGGyNZDrgTPzkjcF+iW6KBXimVRLg4DH/3Knjw5hj8WmPLbDNg==",
+      "version": "4.0.0-beta.23",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-4.0.0-beta.23.tgz",
+      "integrity": "sha512-e6mNBVAYGy0M1OwX0mhRB/lCkOedKeqTUrbPjNCqvm8hQGUsJJobqfHVvTv8o6JJaOO2MFcxKF4vZM+PEKbHZA==",
       "requires": {
-        "@babel/runtime": "^7.5.5",
+        "@babel/runtime": "^7.17.9",
+        "@types/use-sync-external-store": "^0.0.3",
         "broadcast-channel": "^3.4.1",
-        "match-sorter": "^6.0.2"
+        "match-sorter": "^6.0.2",
+        "use-sync-external-store": "^1.1.0"
       }
     },
     "react-refresh": {
@@ -4403,9 +4425,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "remove-accents": {
       "version": "0.4.2",
@@ -4652,6 +4674,12 @@
         "detect-node": "^2.0.4"
       }
     },
+    "use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "requires": {}
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/src/components/IssueItem.jsx b/src/components/IssueItem.jsx
new file mode 100644
index 0000000..1d3c8da
--- /dev/null
+++ b/src/components/IssueItem.jsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { GoIssueOpened, GoIssueClosed } from "react-icons/go";
+import { FaRegComment } from "react-icons/fa";
+import { Link } from "react-router-dom";
+import { relativeDate } from "../helpers/relativeDate";
+import { useUserData } from "../helpers/useUserData";
+
+function IssueItem({ issue }) {
+  const {
+    title,
+    labels,
+    comments,
+    number,
+    createdDate,
+    createdBy,
+    assignee,
+    status,
+  } = issue;
+
+  const userImageData = useUserData(assignee);
+  const userNameData = useUserData(createdBy);
+
+  return (
+    <li>
+      <div>
+        {status === "done" || status === "cancelled" ? (
+          <GoIssueOpened style={{ color: "red" }} />
+        ) : (
+          <GoIssueClosed style={{ color: "green" }} />
+        )}
+      </div>
+      <div className="issue-content">
+        <span>
+          <Link to={`/issue/${number}`}>{title}</Link>
+          {labels?.map((label) => (
+            <span key={label} className={`label red`}>
+              {label}
+            </span>
+          ))}
+        </span>
+        <small>
+          # {number} opened {relativeDate(createdDate)} {userNameData.isSuccess ? `by ${userNameData.data.name}` : null}
+        </small>
+      </div>
+      {assignee ? <img src={userImageData.isSuccess ? userImageData.data.profilePictureUrl : ""} className="assigned-to" alt="profile"/> : null}
+      <span className="comment-count">
+        {comments.length > 0 ? (
+          <React.Fragment>
+            <FaRegComment />
+            {comments.length}
+          </React.Fragment>
+        ) : null}
+      </span>
+    </li>
+  );
+}
+
+export default IssueItem;
diff --git a/src/components/IssuesList.jsx b/src/components/IssuesList.jsx
index f1822db..4f906b9 100644
--- a/src/components/IssuesList.jsx
+++ b/src/components/IssuesList.jsx
@@ -1,14 +1,24 @@
+import { useQuery } from "react-query";
 import { Link } from "react-router-dom";
+import IssueItem from "./IssueItem";
 
 export default function IssuesList() {
+  const issuesQuery = useQuery(["issues"], () =>
+    fetch("/api/issues").then((res) => res.json())
+  );
+
   return (
     <div>
-      <h1>Issues List</h1>
-      <ul>
-        <li>
-          <Link to="/issue/1">Issue 1</Link>
-        </li>
-      </ul>
+      <h2>Issues List</h2>
+      {issuesQuery.isLoading ? (
+        <p>Loading...</p>
+      ) : (
+        <ul className="issues-list">
+          {issuesQuery.data?.map((issue) => (
+            <IssueItem key={issue?.id} issue={issue}/>
+          ))}
+        </ul>
+      )}
     </div>
   );
 }
diff --git a/src/helpers/useUserData.js b/src/helpers/useUserData.js
new file mode 100644
index 0000000..cee8ec6
--- /dev/null
+++ b/src/helpers/useUserData.js
@@ -0,0 +1,8 @@
+import { useQuery } from "react-query";
+
+export function useUserData(userId) {
+  return useQuery(
+    ["user", userId],
+    ()=> fetch(`api/users/${userId}`).then(res => res.json())
+  )
+}
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index 298027b..9cad8fb 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -18,7 +18,7 @@ new Promise((res) => setTimeout(res, 100))
   .then(() => {
     ReactDOM.render(
       <React.StrictMode>
-        <QueryClientProvider>
+        <QueryClientProvider client={client}>
           <BrowserRouter>
             <div className="container">
               <App />