diff --git a/src/sections/Art/components/ArtList.jsx b/src/sections/Art/components/ArtList.jsx
index e69de29b..2e714f85 100644
--- a/src/sections/Art/components/ArtList.jsx
+++ b/src/sections/Art/components/ArtList.jsx
@@ -0,0 +1,32 @@
+/* eslint-disable no-undef */
+import { useState, useEffect } from "react";
+import ArtListItem from "./ArtListItem";
+
+function ArtList() {
+  const url = "https://boolean-uk-api-server.fly.dev/art";
+
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch(url);
+      const jsonData = await response.json();
+      setData(jsonData);
+    };
+    fetchData();
+  }, []);
+
+  return (
+    <section>
+      <div className="scroll-container">
+            <ul className="art-list">
+            {data.map((art, index) => (
+               <ArtListItem key ={index} art={art} />
+             ))}
+            </ul>
+      </div>
+    </section>
+  );
+}
+
+export default ArtList;
diff --git a/src/sections/Art/components/ArtListItem.jsx b/src/sections/Art/components/ArtListItem.jsx
index e69de29b..ea9816f5 100644
--- a/src/sections/Art/components/ArtListItem.jsx
+++ b/src/sections/Art/components/ArtListItem.jsx
@@ -0,0 +1,19 @@
+function ArtListItem({ art, index }) {
+  return (
+    <li key={index}>
+      <div className="frame">
+        <img src={` https://boolean-uk-api-server.fly.dev${art.imageURL}`} />
+      </div>
+      <h3>{art.title}</h3>
+      <p>{art.artist}</p>
+      <h4>Publication History:</h4>
+      <ul>
+        {art.publicationHistory.map((publication, index) => (
+          <p key={index}>{publication}</p>
+        ))}
+      </ul>
+    </li>
+  );
+}
+
+export default ArtListItem;
diff --git a/src/sections/Art/index.jsx b/src/sections/Art/index.jsx
index 0c74ffc2..1f8ccac1 100644
--- a/src/sections/Art/index.jsx
+++ b/src/sections/Art/index.jsx
@@ -1,10 +1,14 @@
+import ArtList from "./components/ArtList";
+
 function ArtsSection() {
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <ArtList />
+      </div>
     </section>
-  )
+  );
 }
 
-export default ArtsSection
+export default ArtsSection;
diff --git a/src/sections/Users/components/UsersList.jsx b/src/sections/Users/components/UsersList.jsx
index e69de29b..27bcc490 100644
--- a/src/sections/Users/components/UsersList.jsx
+++ b/src/sections/Users/components/UsersList.jsx
@@ -0,0 +1,32 @@
+/* eslint-disable no-undef */
+import { useState, useEffect } from "react";
+import UsersListItem from "./UsersListItem"
+
+function UsersList() {
+  const url = "https://boolean-uk-api-server.fly.dev/fanden/contact";
+
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch(url);
+      const jsonData = await response.json();
+      setData(jsonData);
+    };
+    fetchData();
+  }, []);
+  
+  return (
+    <section>
+      <div className="scroll-container">
+        <ul className ="users-list">
+          {data.map((user, index) => (
+            <UsersListItem key={index} user={user} />
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}
+
+export default UsersList;
diff --git a/src/sections/Users/components/UsersListItem.jsx b/src/sections/Users/components/UsersListItem.jsx
index e69de29b..4272c6a0 100644
--- a/src/sections/Users/components/UsersListItem.jsx
+++ b/src/sections/Users/components/UsersListItem.jsx
@@ -0,0 +1,36 @@
+function UsersListItem({ user, index }) {
+
+  const femaleKeywords = [
+    "male to female trans woman",
+    "transexual woman",
+    "male to female",
+    "transexual female",
+  ];
+
+  const maleKeywords = [
+    "transexual man",
+    "transmasculine",
+    "female to male transgender man",
+    "ftm",
+  ];
+
+  return (
+    <>
+      <li
+        key={index}
+        style={{
+          background:
+            maleKeywords.includes(user.gender.toLowerCase()) ? "#91dae5" : 
+            femaleKeywords.includes(user.gender.toLowerCase()) ? "#d691e5" : 
+            "#91e5a3",
+        }}
+      >
+        <img src={user.profileImage} alt={user.firstName + user.lastName} />
+        <h3>{user.firstName + " " + user.lastName}</h3>
+        <p>Email: {user.email}</p>
+      </li>
+    </>
+  );
+}
+
+export default UsersListItem;
diff --git a/src/sections/Users/index.jsx b/src/sections/Users/index.jsx
index 77332830..3c85f327 100644
--- a/src/sections/Users/index.jsx
+++ b/src/sections/Users/index.jsx
@@ -1,8 +1,11 @@
+import UsersList from "./components/UsersList";
 function UsersSection() {
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <UsersList/>
+      </div>
     </section>
   )
 }