diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..b58b603
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/.idea/gdg-website.iml b/.idea/gdg-website.iml
new file mode 100644
index 0000000..24643cc
--- /dev/null
+++ b/.idea/gdg-website.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..30927ef
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/gdg-website.iml" filepath="$PROJECT_DIR$/.idea/gdg-website.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/src/app/(pages)/careers/page.jsx b/src/app/(pages)/careers/page.jsx
index 1ae98c5..d7baa79 100644
--- a/src/app/(pages)/careers/page.jsx
+++ b/src/app/(pages)/careers/page.jsx
@@ -174,3 +174,61 @@ const CareerPage = () => {
 };
 
 export default CareerPage;
+
+
+import React, { useEffect, useState } from 'react';
+
+const Spotlight = () => {
+  const [spotlightJobs, setSpotlightJobs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchJobs = async () => {
+      try {
+        const response = await fetch('/api/jobs'); 
+        if (!response.ok) throw new Error('Network response was not ok');
+        const data = await response.json();
+        setSpotlightJobs(data);
+      } catch (error) {
+        setError(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchJobs();
+  }, []);
+
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error loading jobs: {error.message}</p>;
+
+  return (
+      <div className="mt-16 flex flex-col items-center">
+        <h2 className="text-3xl font-semibold mb-6">Spotlight</h2>
+        <div className="flex space-x-4 overflow-x-auto pb-4">
+          {spotlightJobs.map((job, index) => (
+              <div key={index} className="bg-white shadow-md rounded-lg p-4 w-72">
+                <img src={job.image} alt={job.title} className="rounded-t-lg w-full h-40 object-cover" />
+                <div className="mt-4">
+                  <h3 className="font-bold text-xl">{job.title}</h3>
+                  <p className="mt-2 text-gray-600">{job.description}</p>
+                  {job.location && (
+                      <div className="mt-4 flex items-center space-x-2 text-gray-500">
+                        <span className="material-icons">laptop_mac</span>
+                        <span>{job.location}</span>
+                      </div>
+                  )}
+                  {job.office && (
+                      <div className="mt-2 flex items-center space-x-2 text-gray-500">
+                        <span className="material-icons">location_on</span>
+                        <span>{job.office}</span>
+                      </div>
+                  )}
+                </div>
+              </div>
+          ))}
+        </div>
+      </div>
+  );
+};