diff --git a/client/components/OpportunitiesWidget.tsx b/client/components/OpportunitiesWidget.tsx
new file mode 100644
index 00000000..7af5179d
--- /dev/null
+++ b/client/components/OpportunitiesWidget.tsx
@@ -0,0 +1,209 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Briefcase, MapPin, DollarSign, Clock, ArrowRight, AlertCircle } from "lucide-react";
+
+export interface Opportunity {
+  id: string;
+  title: string;
+  category?: string;
+  budget?: number;
+  timeline?: string;
+  status: "open" | "in_progress" | "closed";
+  description?: string;
+  applications_count?: number;
+  posted_by?: string;
+  location?: string;
+  skills_required?: string[];
+}
+
+interface OpportunitiesWidgetProps {
+  opportunities: Opportunity[];
+  title?: string;
+  description?: string;
+  onViewDetails?: (oppId: string) => void;
+  onApply?: (oppId: string) => void;
+  showApplyButton?: boolean;
+  accentColor?: "purple" | "blue" | "cyan" | "green" | "amber" | "red";
+}
+
+const colorMap = {
+  purple: {
+    bg: "bg-gradient-to-br from-purple-950/40 to-purple-900/20",
+    border: "border-purple-500/20",
+    accent: "bg-purple-600 hover:bg-purple-700",
+    text: "text-purple-300",
+  },
+  blue: {
+    bg: "bg-gradient-to-br from-blue-950/40 to-blue-900/20",
+    border: "border-blue-500/20",
+    accent: "bg-blue-600 hover:bg-blue-700",
+    text: "text-blue-300",
+  },
+  cyan: {
+    bg: "bg-gradient-to-br from-cyan-950/40 to-cyan-900/20",
+    border: "border-cyan-500/20",
+    accent: "bg-cyan-600 hover:bg-cyan-700",
+    text: "text-cyan-300",
+  },
+  green: {
+    bg: "bg-gradient-to-br from-green-950/40 to-green-900/20",
+    border: "border-green-500/20",
+    accent: "bg-green-600 hover:bg-green-700",
+    text: "text-green-300",
+  },
+  amber: {
+    bg: "bg-gradient-to-br from-amber-950/40 to-amber-900/20",
+    border: "border-amber-500/20",
+    accent: "bg-amber-600 hover:bg-amber-700",
+    text: "text-amber-300",
+  },
+  red: {
+    bg: "bg-gradient-to-br from-red-950/40 to-red-900/20",
+    border: "border-red-500/20",
+    accent: "bg-red-600 hover:bg-red-700",
+    text: "text-red-300",
+  },
+};
+
+const statusBadge = {
+  open: "bg-green-600/50 text-green-100",
+  in_progress: "bg-blue-600/50 text-blue-100",
+  closed: "bg-gray-600/50 text-gray-100",
+};
+
+export function OpportunitiesWidget({
+  opportunities,
+  title = "Opportunities",
+  description = "Available jobs and projects",
+  onViewDetails,
+  onApply,
+  showApplyButton = true,
+  accentColor = "purple",
+}: OpportunitiesWidgetProps) {
+  const colors = colorMap[accentColor];
+
+  return (
+    <Card className={`${colors.bg} border ${colors.border}`}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Briefcase className="h-5 w-5" />
+          {title}
+        </CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {opportunities.length === 0 ? (
+          <div className="text-center py-12">
+            <AlertCircle className="h-12 w-12 mx-auto text-gray-500 opacity-50 mb-4" />
+            <p className="text-gray-400">No opportunities available</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {opportunities.map((opp) => (
+              <div
+                key={opp.id}
+                className="p-4 bg-black/30 rounded-lg border border-gray-500/10 hover:border-gray-500/30 transition space-y-3"
+              >
+                {/* Header */}
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1 min-w-0">
+                    <h4 className="font-semibold text-white truncate">
+                      {opp.title}
+                    </h4>
+                    {opp.category && (
+                      <p className="text-xs text-gray-400 mt-1">{opp.category}</p>
+                    )}
+                  </div>
+                  <Badge className={statusBadge[opp.status]}>
+                    {opp.status}
+                  </Badge>
+                </div>
+
+                {/* Description */}
+                {opp.description && (
+                  <p className="text-sm text-gray-400 line-clamp-2">
+                    {opp.description}
+                  </p>
+                )}
+
+                {/* Skills */}
+                {opp.skills_required && opp.skills_required.length > 0 && (
+                  <div className="flex gap-2 flex-wrap">
+                    {opp.skills_required.slice(0, 3).map((skill) => (
+                      <Badge
+                        key={skill}
+                        className="bg-gray-600/30 text-gray-200 text-xs"
+                      >
+                        {skill}
+                      </Badge>
+                    ))}
+                    {opp.skills_required.length > 3 && (
+                      <Badge className="bg-gray-600/30 text-gray-200 text-xs">
+                        +{opp.skills_required.length - 3}
+                      </Badge>
+                    )}
+                  </div>
+                )}
+
+                {/* Meta Information */}
+                <div className="flex flex-wrap gap-4 text-xs text-gray-400 pt-2 border-t border-gray-500/10">
+                  {opp.budget && (
+                    <div className="flex items-center gap-1">
+                      <DollarSign className="h-4 w-4" />
+                      <span>${opp.budget.toLocaleString()}</span>
+                    </div>
+                  )}
+                  {opp.timeline && (
+                    <div className="flex items-center gap-1">
+                      <Clock className="h-4 w-4" />
+                      <span>{opp.timeline}</span>
+                    </div>
+                  )}
+                  {opp.location && (
+                    <div className="flex items-center gap-1">
+                      <MapPin className="h-4 w-4" />
+                      <span>{opp.location}</span>
+                    </div>
+                  )}
+                  {opp.applications_count !== undefined && (
+                    <div className="flex items-center gap-1">
+                      <Briefcase className="h-4 w-4" />
+                      <span>{opp.applications_count} applications</span>
+                    </div>
+                  )}
+                </div>
+
+                {/* Actions */}
+                <div className="flex gap-2 pt-2">
+                  {onViewDetails && (
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="flex-1 border-gray-500/20 text-gray-300 hover:bg-gray-500/10"
+                      onClick={() => onViewDetails(opp.id)}
+                    >
+                      View Details
+                      <ArrowRight className="h-3 w-3 ml-1" />
+                    </Button>
+                  )}
+                  {showApplyButton && onApply && (
+                    <Button
+                      size="sm"
+                      className={colors.accent}
+                      onClick={() => onApply(opp.id)}
+                    >
+                      Apply
+                    </Button>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default OpportunitiesWidget;