diff --git a/individual/fullstack/s54-s62/src/App.js b/individual/fullstack/s54-s62/src/App.js
index fea22de..9835c36 100644
--- a/individual/fullstack/s54-s62/src/App.js
+++ b/individual/fullstack/s54-s62/src/App.js
@@ -4,6 +4,7 @@ import "./App.css";
 
 // Pages
 import Home from "./pages/Home";
+import CourseCard from "./components/CourseCard";
 
 function App() {
   return (
@@ -15,6 +16,8 @@ function App() {
       <Container>
         <Home />
       </Container>
+
+      <CourseCard/>
     </>
   );
 }
diff --git a/individual/fullstack/s54-s62/src/components/CourseCard.js b/individual/fullstack/s54-s62/src/components/CourseCard.js
new file mode 100644
index 0000000..4a13e98
--- /dev/null
+++ b/individual/fullstack/s54-s62/src/components/CourseCard.js
@@ -0,0 +1,16 @@
+import { Button, Container } from "react-bootstrap";
+
+export default function CourseCard() {
+  return (
+    <Container className="courseComponent1">
+        <h1>Sample Course</h1>
+        <p>Description:
+            <p>This is a sample course offering:</p>
+        </p>
+        <p>Price:
+            <p>PhP 40,000</p>
+        </p>
+      <Button>Enroll</Button>
+    </Container>
+  );
+}