diff --git a/frontend/pronunciationAppFront/src/Practice.jsx b/frontend/pronunciationAppFront/src/Practice.jsx
index c883d79e9..37f06b80d 100644
--- a/frontend/pronunciationAppFront/src/Practice.jsx
+++ b/frontend/pronunciationAppFront/src/Practice.jsx
@@ -1,14 +1,28 @@
-import Cards from './Cards'
+import  { useEffect, useState } from "react";
+import { fetchWords } from "./data-api";
+import Cards from "./Cards";
 
-export default function Practice(){
+export default function Practice() {
+  const [words, setWords] = useState([]);
 
-
-  return (
   
-  <>
-    {" "}
-    <h1>Practice</h1>
-    <Cards />
-  </>
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const data = await fetchWords(); 
+        setWords(data); 
+      } catch (error) {
+        console.error("Error fetching words:", error);
+      }
+    };
 
-)};
\ No newline at end of file
+    fetchData();
+  }, []);
+
+  return (
+    <div>
+      <h1>Practice</h1>
+      <Cards words={words} /> {}
+    </div>
+  );
+}
diff --git a/frontend/pronunciationAppFront/src/data-api.js b/frontend/pronunciationAppFront/src/data-api.js
index 0bcdfadc7..88e37b488 100644
--- a/frontend/pronunciationAppFront/src/data-api.js
+++ b/frontend/pronunciationAppFront/src/data-api.js
@@ -1,7 +1,7 @@
 // api.js
 import axios from "axios";
 
-const BASE_URL = "https://1e84671c-879b-423f-b798-dfa33a0482f6.mock.pstmn.io";
+const BASE_URL = "https://f9430708-20db-4542-b141-b2f26b7f2154.mock.pstmn.io";
 
 // READ: Fetch all words
 export const fetchWords = async () => {