diff --git a/client/components/ResearchWidget.tsx b/client/components/ResearchWidget.tsx
new file mode 100644
index 00000000..274aaa51
--- /dev/null
+++ b/client/components/ResearchWidget.tsx
@@ -0,0 +1,176 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { BookMarked, ExternalLink, CheckCircle, Clock, AlertCircle } from "lucide-react";
+
+export interface ResearchTrack {
+  id: string;
+  title: string;
+  description?: string;
+  status: "active" | "paused" | "completed" | "on_hold";
+  category?: string;
+  progress?: number;
+  whitepaper_url?: string;
+  publications?: number;
+  team_members?: number;
+  start_date?: string;
+}
+
+interface ResearchWidgetProps {
+  tracks: ResearchTrack[];
+  title?: string;
+  description?: string;
+  onViewDetails?: (trackId: string) => void;
+  accentColor?: "yellow" | "blue" | "purple";
+}
+
+const colorMap = {
+  yellow: {
+    bg: "bg-gradient-to-br from-yellow-950/40 to-yellow-900/20",
+    border: "border-yellow-500/20",
+  },
+  blue: {
+    bg: "bg-gradient-to-br from-blue-950/40 to-blue-900/20",
+    border: "border-blue-500/20",
+  },
+  purple: {
+    bg: "bg-gradient-to-br from-purple-950/40 to-purple-900/20",
+    border: "border-purple-500/20",
+  },
+};
+
+const statusMap = {
+  active: { label: "Active", color: "bg-green-600/50 text-green-100", icon: CheckCircle },
+  paused: { label: "Paused", color: "bg-yellow-600/50 text-yellow-100", icon: Clock },
+  completed: { label: "Completed", color: "bg-blue-600/50 text-blue-100", icon: CheckCircle },
+  on_hold: { label: "On Hold", color: "bg-red-600/50 text-red-100", icon: AlertCircle },
+};
+
+export function ResearchWidget({
+  tracks,
+  title = "Active Research Tracks",
+  description = "Current research initiatives and whitepapers",
+  onViewDetails,
+  accentColor = "yellow",
+}: ResearchWidgetProps) {
+  const colors = colorMap[accentColor];
+  const activeCount = tracks.filter(t => t.status === "active").length;
+  const completedCount = tracks.filter(t => t.status === "completed").length;
+
+  return (
+    <Card className={`${colors.bg} border ${colors.border}`}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <BookMarked className="h-5 w-5" />
+          {title}
+        </CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {tracks.length === 0 ? (
+          <div className="text-center py-12">
+            <BookMarked className="h-12 w-12 mx-auto text-gray-500 opacity-50 mb-4" />
+            <p className="text-gray-400">No active research tracks</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {/* Stats */}
+            <div className="grid grid-cols-3 gap-2 p-3 bg-black/20 rounded-lg mb-4">
+              <div className="text-center">
+                <p className="text-xs text-gray-400">Total</p>
+                <p className="text-lg font-bold text-white">{tracks.length}</p>
+              </div>
+              <div className="text-center">
+                <p className="text-xs text-gray-400">Active</p>
+                <p className="text-lg font-bold text-green-400">{activeCount}</p>
+              </div>
+              <div className="text-center">
+                <p className="text-xs text-gray-400">Completed</p>
+                <p className="text-lg font-bold text-blue-400">{completedCount}</p>
+              </div>
+            </div>
+
+            {/* Tracks List */}
+            <div className="space-y-3">
+              {tracks.map((track) => {
+                const statusInfo = statusMap[track.status];
+                const StatusIcon = statusInfo.icon;
+
+                return (
+                  <div
+                    key={track.id}
+                    className="p-4 bg-black/30 rounded-lg border border-gray-500/10 hover:border-gray-500/30 transition space-y-3 cursor-pointer"
+                    onClick={() => onViewDetails?.(track.id)}
+                  >
+                    {/* Header */}
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <h4 className="font-semibold text-white">{track.title}</h4>
+                        {track.category && (
+                          <p className="text-xs text-gray-400">{track.category}</p>
+                        )}
+                      </div>
+                      <Badge className={statusInfo.color}>
+                        <StatusIcon className="h-3 w-3 mr-1" />
+                        {statusInfo.label}
+                      </Badge>
+                    </div>
+
+                    {/* Description */}
+                    {track.description && (
+                      <p className="text-sm text-gray-400">{track.description}</p>
+                    )}
+
+                    {/* Meta */}
+                    <div className="flex flex-wrap gap-2 text-xs text-gray-400 py-2 border-t border-b border-gray-500/10">
+                      {track.progress !== undefined && (
+                        <span>{track.progress}% complete</span>
+                      )}
+                      {track.publications && track.publications > 0 && (
+                        <span>📄 {track.publications} publications</span>
+                      )}
+                      {track.team_members && track.team_members > 0 && (
+                        <span>👥 {track.team_members} members</span>
+                      )}
+                    </div>
+
+                    {/* Actions */}
+                    <div className="flex gap-2 pt-2">
+                      {track.whitepaper_url && (
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          className="flex-1 border-gray-500/20 text-gray-300 hover:bg-gray-500/10 text-xs"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            window.open(track.whitepaper_url, "_blank");
+                          }}
+                        >
+                          <ExternalLink className="h-3 w-3 mr-1" />
+                          Whitepaper
+                        </Button>
+                      )}
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        className="flex-1 border-gray-500/20 text-gray-300 hover:bg-gray-500/10 text-xs"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onViewDetails?.(track.id);
+                        }}
+                      >
+                        View Track
+                      </Button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default ResearchWidget;