diff --git a/package-lock.json b/package-lock.json
index 5d83ccff..19d2389b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,8 @@
         "@testing-library/react": "^14.2.1",
         "@testing-library/user-event": "^14.5.2",
         "flag": "^5.0.1",
+        "framer-motion": "^11.11.1",
+        "lucide-react": "^0.447.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.0.1",
@@ -8512,6 +8514,31 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.1.tgz",
+      "integrity": "sha512-Ucr9eHSrk0d+l6vyl9fvq6omh/PAWHjS+PlczpsoUdhJo1TuF3ULWJNuAMnpWQ1dGyPOyoUVuYlUKjE/s8dyCA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -12113,6 +12140,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.447.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.447.0.tgz",
+      "integrity": "sha512-SZ//hQmvi+kDKrNepArVkYK7/jfeZ5uFNEnYmd45RKZcbGD78KLnrcNXmgeg6m+xNHFvTG+CblszXCy4n6DN4w==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
diff --git a/package.json b/package.json
index c157ed7f..14230266 100644
--- a/package.json
+++ b/package.json
@@ -11,11 +11,13 @@
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "flag": "^5.0.1",
+    "framer-motion": "^11.11.1",
+    "lucide-react": "^0.447.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
-    "react-scripts": "5.0.1",
     "react-router-dom": "^6.22.0",
+    "react-scripts": "5.0.1",
     "web-vitals": "^3.5.2"
   },
   "scripts": {
diff --git a/src/Page/Opportunities.jsx b/src/Page/Opportunities.jsx
index c6857ea9..cff5dc0e 100644
--- a/src/Page/Opportunities.jsx
+++ b/src/Page/Opportunities.jsx
@@ -1,4 +1,97 @@
-function Opportunities() {
-  return <h1>Opportunities Demo</h1>;
+import React from 'react';
+import { motion } from 'framer-motion';
+import { ExternalLink } from 'lucide-react';
+
+const opportunities = [
+  {
+    title: 'Hybrid & Onsite Jobs',
+    items: ['Software Engineer at TechCorp', 'Data Scientist at DataInc', 'UX Designer at DesignHub'],
+  },
+  {
+    title: 'Remote Jobs',
+    items: ['Software Engineer at Microsoft', 'JAVA Develoepr at YULK', 'UI Designer at Xdesign'],
+  },
+  {
+    title: 'Internships',
+    items: ['Summer Internship at Google', 'Fall Internship at Microsoft', 'Remote Internship at Amazon'],
+  },
+  { title: 'Freelance Work', items: ['  Web developer', 'Web Designer', 'AI Enginner'] },
+  { title: 'Hackathons', items: ['Global AI Hackathon', 'Blockchain Innovation Challenge', 'Green Tech Hackathon'] },
+  { title: 'Open Source', items: ['DevDisplay', 'Hacktoberfest - 2024', 'GSSOC - 2024'] },
+  { title: 'Tech Events', items: ['TechCrunch Disrupt', 'Web Summit', 'Google I/O'] },
+  { title: 'BootCamps', items: ['Full Stack Web Development', 'Data Science Immersive', 'UX/UI Design Bootcamp'] },
+  { title: 'Devfest', items: ['Google DevFest 2024', 'Apple WWDC', 'Microsoft Build'] },
+];
+
+export default function Opportunities() {
+  return (
+    <div className="min-h-screen bg-[#141d2f] text-center text-white">
+      <header className="bg-[#00a6fb] p-4">
+        <h1 className="text-2xl font-bold">Opportunities Hub</h1>
+      </header>
+
+      <section className="relative flex h-[50vh] items-center justify-center overflow-hidden">
+        <motion.div
+          className="absolute inset-0 z-0"
+          animate={{
+            backgroundPosition: ['0% 0%', '100% 100%'],
+          }}
+          transition={{
+            duration: 20,
+            repeat: Infinity,
+            repeatType: 'reverse',
+          }}
+          style={{
+            backgroundImage:
+              'linear-gradient(45deg, #141d2f 25%, #00a6fb 25%, #00a6fb 50%, #141d2f 50%, #141d2f 75%, #00a6fb 75%, #00a6fb 100%)',
+            backgroundSize: '400% 400%',
+          }}
+        />
+        <div className="relative z-10 text-center">
+          <h2 className="mb-4 text-4xl font-bold">Opportunities In Tech Fields</h2>
+          <p className="text-xl">
+            Explore the hub of all the latest & upcoming Opportunities in one place
+            <br />
+            (jobs, internships, hackathons, events, bootcamps, webinars, devfests)
+          </p>
+        </div>
+      </section>
+
+      <main className="container mx-auto grid gap-8 p-4 md:grid-cols-2 lg:grid-cols-3">
+        {opportunities.map((category) => (
+          <div key={category.title} className="rounded-lg bg-[#1e2a42] p-4 shadow-lg">
+            <h3 className="mb-4 text-2xl font-bold text-[#00a6fb]">{category.title}</h3>
+            <ul className="space-y-2">
+              {category.items.map((item, index) => (
+                <li key={index} className="flex items-center">
+                  <ExternalLink className="mr-2 h-4 w-4 text-[#00a6fb]" />
+                  <button className="text-left transition-colors hover:text-[#00a6fb]">{item}</button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </main>
+
+      <footer className="mt-12 bg-[#00a6fb] p-8">
+        <div className="container mx-auto text-center">
+          <h3 className="mb-4 text-2xl font-bold">Join the Tech Revolution</h3>
+          <p className="mb-4">Stay updated with the latest opportunities and events in the tech world.</p>
+          <form className="flex flex-col items-center justify-center gap-4 sm:flex-row">
+            <input
+              type="email"
+              placeholder="Enter your email"
+              className="w-full rounded-lg px-4 py-2 text-[#141d2f] sm:w-auto"
+            />
+            <button
+              type="submit"
+              className="w-full rounded-lg bg-[#141d2f] px-6 py-2 text-white transition-colors hover:bg-[#1e2a42] sm:w-auto"
+            >
+              Subscribe
+            </button>
+          </form>
+        </div>
+      </footer>
+    </div>
+  );
 }
-export default Opportunities;