diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 8c8d13b..5b675b4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import ListView from "./components/ListView";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import MultiForm from "./components/MultiForm";
@@ -8,28 +9,44 @@ import hero from "./assets/hero-img.png";
 import Modal from "./components/Modal";
 
 const App: React.FC = () => {
-    const [openModal, setOpenModal] = useState(false);
-    return (
-        <>
-            <main>
-                <Toaster position="bottom-center" />
-                <Circles />
-                <div id="wrapper">
-                    <div className="wrapper-item">
-                        <div id="wrapped">
-                            <Header />
-                            <MultiForm />
-                        </div>
-                        <Footer openModal={setOpenModal} />
-                    </div>
-                    <aside>
-                        <img src={hero} alt="." />
-                    </aside>
-                </div>
-            </main>
-            {openModal && <Modal closeModal={setOpenModal} />}
-        </>
-    );
+  const [openModal, setOpenModal] = useState(false);
+  const [items, setItems] = useState<any[]>([]);
+
+  useEffect(() => {
+    fetch("/api/list")
+      .then((res) => res.json())
+      .then((data) => setItems(data))
+      .catch((err) => console.error(err));
+  }, []);
+
+  return (
+    <>
+      <main>
+        <Toaster position="bottom-center" />
+        <Circles />
+
+        <div id="wrapper">
+          <div className="wrapper-item">
+            <div id="wrapped">
+              <Header />
+              <MultiForm />
+
+              {/* LIST RENDERED HERE */}
+              <ListView items={items} />
+            </div>
+
+            <Footer openModal={setOpenModal} />
+          </div>
+
+          <aside>
+            <img src={hero} alt="hero" />
+          </aside>
+        </div>
+      </main>
+
+      {openModal && <Modal closeModal={setOpenModal} />}
+    </>
+  );
 };
 
 export default App;
diff --git a/frontend/src/components/ListView.tsx b/frontend/src/components/ListView.tsx
new file mode 100644
index 0000000..26048b5
--- /dev/null
+++ b/frontend/src/components/ListView.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+interface ListViewProps {
+  items: any[];
+}
+
+const ListView: React.FC<ListViewProps> = ({ items }) => {
+  if (!items || items.length === 0) {
+    return <p>No items found.</p>;
+  }
+
+  return (
+    <div>
+      <h3>Items List</h3>
+      <ul>
+        {items.map((item, index) => (
+          <li key={index}>
+            {typeof item === "string" ? item : JSON.stringify(item)}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default ListView;
+