diff --git a/src/app/components/courses.js b/src/app/components/courses.js
index 26f3139..d759bc0 100644
--- a/src/app/components/courses.js
+++ b/src/app/components/courses.js
@@ -1,17 +1,64 @@
-import React from 'react'
+"use client";
+import React, {useState, useEffect} from 'react'
 import CourseCard from './coursecard'
-import data from '../data.json'
+import { nebulaFetch } from '../utils/api'
 
 function Courses() {
+  const [courses, setCourses] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function fetchCourses() {
+      try {
+        console.log("Starting fetch..");
+        const apiResponse = await nebulaFetch('course/all');        // gets all courses
+        console.log("After fetch");
+        console.log("API Response:" , apiResponse);
+        setCourses(apiResponse.data || []);
+      } catch (err) {
+        console.error("API error: ", err);
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchCourses();
+  }, []);
+
+  if (loading)
+   return <div className="min-h-screen text-center py-12 bg-white">
+            <div className="animate-spin rounded-full h-12 w-12
+              border-b-2 border-blue-600 mx-auto mb-4"></div>
+              <p className="text-gray-600">Loading course data...</p>
+          </div>
+
+  if (error) 
+    return <div> Error: {error} </div>;
+
+  const relevantCourses = ["1337", "2305","2340","3341", "3345"];
+  const filtered = courses.filter(course => 
+    course.subject_prefix == "CS" && relevantCourses.includes(course.course_number))
+   
+  const unique = [];         // remove duplicates
+  const seen = new Set();
+
+  for (const course of filtered) {   
+    if (!seen.has(course.course_number)) {
+      seen.add(course.course_number);
+      unique.push(course);
+    }
+  }
+
   return (
     <div className="py-12 bg-gray-100">
-      {data.courses.map((course, idx) => (
+      {unique.map((course, idx) => (
         <div key={idx} className="mb-6">
           <CourseCard
-            courseCode={`${course.course_tag} ${course.course_number}`}
-            title={course.course_name}
-            description={course.course_description}
-            creditHours={course.course_credits}
+            courseCode={`${course.subject_prefix} ${course.course_number}`}
+            title={course.title}
+            description={course.description}
+            creditHours={course.credit_hours}
           />
         </div>
       ))}
diff --git a/src/app/utils/api.js b/src/app/utils/api.js
new file mode 100644
index 0000000..e1fd96a
--- /dev/null
+++ b/src/app/utils/api.js
@@ -0,0 +1,17 @@
+const NEBULA_API_ENDPOINT = 'https://api.utdnebula.com/';
+
+export async function nebulaFetch(path) { 
+	const url = `${NEBULA_API_ENDPOINT}${path}`;
+	const headers = {
+		'x-api-key': process.env.NEXT_PUBLIC_NEBULA_API_KEY,
+	};
+	const response = await fetch(url, {
+		headers,
+	});
+  console.log(response);
+	if (!response.ok) {
+		throw new Error(`Nebula API error: ${response.status}`);
+	}
+	return response.json();
+
+}