component-ify. some things need fixing.

src/components/HistoryTab.tsx

···
 import { UploadHistorySkeleton } from "./common/LoadingSkeleton";
 import { getPlatformColor } from "../lib/utils/platform";
 import { formatRelativeTime } from "../lib/utils/date";
+import EmptyState from "./common/EmptyState";
+import SetupPrompt from "./common/SetupPrompt";
+import Card from "./common/Card";
+import Badge from "./common/Badge";
 
 interface HistoryTabProps {
   uploads: UploadType[];
···
     <div className="p-6">
       {/* Setup Assistant Banner - Only show if wizard not completed */}
       {!wizardCompleted && (
-        <div className="bg-firefly-banner-dark dark:bg-firefly-banner-dark rounded-2xl p-6 text-white mb-3">
-          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
-            <div className="flex-1">
-              <h2 className="text-2xl font-bold mb-2">
-                Need help getting started?
-              </h2>
-              <p className="text-white">
-                Run the setup assistant to configure your preferences in
-                minutes.
-              </p>
-            </div>
-            <button
-              onClick={onShowWizard}
-              className="bg-white text-slate-900 px-6 py-3 rounded-xl font-semibold hover:bg-slate-100 transition-all flex items-center space-x-2 whitespace-nowrap shadow-lg"
-            >
-              <span>Start Setup</span>
-              <ChevronRight className="w-4 h-4" />
-            </button>
-          </div>
-        </div>
+        <SetupPrompt
+          variant="banner"
+          isCompleted={wizardCompleted}
+          onShowWizard={onShowWizard}
+        />
       )}
 
       <div className="flex items-center space-x-3 mb-4">
···
 
       {/* Data Storage Disabled Notice */}
       {!userSettings.saveData && (
-        <div className="mb-4 p-4 border-2 rounded-xl border-orange-650/50 dark:border-amber-400/50 bg-purple-100/50 dark:bg-slate-900/50">
+        <Card className="mb-4 p-4 border-orange-650/50 dark:border-amber-400/50 bg-purple-100/50 dark:bg-slate-900/50">
           <div className="flex items-start space-x-3">
             <Database className="w-5 h-5 text-orange-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
             <div>
···
               </p>
             </div>
           </div>
-        </div>
+        </Card>
       )}
 
       {isLoading ? (
···
           ))}
         </div>
       ) : uploads.length === 0 ? (
-        <div className="text-center py-12">
-          <Upload className="w-16 h-16 text-purple-900 dark:text-cyan-100 mx-auto mb-4" />
-          <p className="text-purple-750 dark:text-cyan-250 font-medium">
-            No previous uploads yet
-          </p>
-          <p className="text-sm text-purple-950 dark:text-cyan-50 mt-2">
-            Upload your first file to get started
-          </p>
-        </div>
+        <EmptyState
+          icon={Upload}
+          title="No previous uploads yet"
+          message="Upload your first file to get started"
+        />
       ) : (
         <div className="space-y-3">
           {uploads.map((upload) => {
···
                 ]
               ];
             return (
-              <div
+              <Card
                 key={upload.uploadId}
+                variant="upload"
                 onClick={() => onLoadUpload(upload.uploadId)}
-                className="w-full flex items-start space-x-4 p-4 bg-purple-100/20 dark:bg-slate-900/50 hover:bg-purple-100/40 dark:hover:bg-slate-900/70 rounded-xl transition-all text-left border-2 border-orange-650/50 dark:border-amber-400/50 hover:border-orange-500 dark:hover:border-amber-400 shadow-md hover:shadow-lg cursor-pointer"
+                className="w-full flex items-start space-x-4 p-4"
               >
                 <div
                   className={`w-10 h-10 bg-gradient-to-r ${getPlatformColor(upload.sourcePlatform)} rounded-xl flex items-center justify-center flex-shrink-0 shadow-md`}
···
                     </a>
                   )}
                   <div className="flex items-center flex-wrap gap-2 py-1.5 sm:ml-0 -ml-14">
-                    <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
+                    <Badge variant="info">
                       {upload.totalUsers}{" "}
                       {upload.totalUsers === 1 ? "user found" : "users found"}
-                    </span>
-                    <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
+                    </Badge>
+                    <Badge variant="info">
                       Uploaded {formatDate(upload.createdAt)}
-                    </span>
+                    </Badge>
                   </div>
                 </div>
-              </div>
+              </Card>
             );
           })}
         </div>

src/components/SearchResultCard.tsx

···
 import type { AtprotoAppId } from "../types/settings";
 import AvatarWithFallback from "./common/AvatarWithFallback";
 import FollowButton from "./common/FollowButton";
+import Badge from "./common/Badge";
+import { StatBadge } from "./common/Stats";
+import Card from "./common/Card";
 
 interface SearchResultCardProps {
   result: SearchResult;
···
 
         <div className="flex items-center flex-wrap gap-2">
           {typeof match.postCount === "number" && match.postCount > 0 && (
-            <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
-              {match.postCount.toLocaleString()} posts
-            </span>
+            <StatBadge value={match.postCount} label="posts" />
           )}
           {typeof match.followerCount === "number" &&
             match.followerCount > 0 && (
-              <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
-                {match.followerCount.toLocaleString()} followers
-              </span>
+              <StatBadge value={match.followerCount} label="followers" />
             )}
-          <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
-            {match.matchScore}% match
-          </span>
+          <Badge variant="match">{match.matchScore}% match</Badge>
         </div>
 
         {match.description && (
···
     const hasMoreMatches = result.atprotoMatches.length > 1;
 
     return (
-      <div className="bg-white/50 dark:bg-slate-900/50 rounded-2xl shadow-sm overflow-hidden border-2 border-cyan-500/30 dark:border-purple-500/30">
+      <Card variant="result">
         {/* Source User */}
         <div className="px-4 py-3 bg-purple-100 dark:bg-slate-900 border-b-2 border-cyan-500/30 dark:border-purple-500/30">
           <div className="flex justify-between gap-2 items-center">
···
             )}
           </div>
         )}
-      </div>
+      </Card>
     );
   },
 );
+
 SearchResultCard.displayName = "SearchResultCard";
 export default SearchResultCard;

src/components/SetupWizard.tsx

···
 import { PLATFORMS } from "../config/platforms";
 import { ATPROTO_APPS } from "../config/atprotoApps";
 import type { UserSettings, PlatformDestinations } from "../types/settings";
+import ProgressBar from "./common/ProgressBar";
+import Card from "./common/Card";
+import PlatformBadge from "./common/PlatformBadge";
 
 interface SetupWizardProps {
   isOpen: boolean;
···
 
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white dark:bg-slate-900 backdrop-blur-xl rounded-2xl max-w-2xl w-full shadow-2xl max-h-[90vh] flex flex-col border-2 border-cyan-500/30 dark:border-purple-500/30">
+      <Card
+        variant="wizard"
+        className="max-w-2xl w-full max-h-[90vh] flex flex-col"
+      >
         {/* Header */}
         <div className="px-6 py-4 border-b-2 border-cyan-500/30 dark:border-purple-500/30 flex-shrink-0">
           <div className="flex items-center justify-between mb-3">
···
             </button>
           </div>
           {/* Progress */}
-          <div className="flex items-center space-x-2">
-            {wizardSteps.map((step, idx) => (
-              <div key={idx} className="flex-1">
-                <div
-                  className={`h-2 rounded-full transition-all ${
-                    idx <= wizardStep
-                      ? "bg-orange-500"
-                      : "bg-cyan-500/30 dark:bg-purple-500/30"
-                  }`}
-                />
-              </div>
-            ))}
-          </div>
+          <ProgressBar
+            current={wizardStep + 1}
+            total={wizardSteps.length}
+            variant="wizard"
+            className="flex items-center space-x-2"
+          />
           <div className="mt-2 text-sm text-purple-750 dark:text-cyan-250">
             Step {wizardStep + 1} of {wizardSteps.length}:{" "}
             {wizardSteps[wizardStep].title}
···
               </p>
               <div className="grid grid-cols-3 gap-3 mt-3">
                 {Object.entries(PLATFORMS).map(([key, p]) => {
-                  const Icon = p.icon;
                   const isSelected = selectedPlatforms.has(key);
                   return (
                     <button
···
                           <Check className="w-4 h-4 text-white dark:text-slate-900" />
                         </div>
                       )}
-                      <Icon className="w-8 h-8 mx-auto mb-2 text-purple-750 dark:text-cyan-250" />
+                      <PlatformBadge
+                        platformKey={key}
+                        showName={false}
+                        size="lg"
+                        className="justify-center mb-2"
+                      />
                       <div className="text-sm font-medium text-purple-950 dark:text-cyan-50">
                         {p.name}
                       </div>
···
               </p>
               <div className="space-y-4 mt-3">
                 {platformsToShow.map(([key, p]) => {
-                  const Icon = p.icon;
                   return (
                     <div
                       key={key}
                       className="flex items-center px-3 max-w-lg mx-sm border-cyan-500/30 dark:border-purple-500/30"
                     >
-                      <div className="flex space-x-3">
-                        <Icon className="w-6 h-6 text-purple-950 dark:text-cyan-50" />
-                        <span className="font-medium text-purple-950 dark:text-cyan-50">
-                          {p.name}
-                        </span>
-                      </div>
+                      <PlatformBadge platformKey={key} size="sm" />
                       <select
                         value={
                           platformDestinations[
···
               </div>
             </div>
           )}
-
           {wizardStep === 3 && (
             <div className="space-y-3">
               <div>
···
             )}
           </button>
         </div>
-      </div>
+      </Card>
     </div>
   );
 }

src/components/UploadTab.tsx

···
 import { Settings } from "lucide-react";
 import { useRef } from "react";
 import PlatformSelector from "../components/PlatformSelector";
+import SetupPrompt from "./common/SetupPrompt";
+import Section from "./common/Section";
 
 interface UploadTabProps {
   wizardCompleted: boolean;
···
   };
 
   return (
-    <div className="p-6">
-      {/* Upload Section */}
+    <Section
+      title="Upload Following Data"
+      description="Find your people on the ATmosphere"
+      action={
+        <SetupPrompt
+          variant="button"
+          isCompleted={wizardCompleted}
+          onShowWizard={onShowWizard}
+        />
+      }
+    >
       <div className="space-y-3">
-        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-4">
-          <div className="flex items-center space-x-3 mb-2 sm:mb-0">
-            <div>
-              <h2 className="text-xl font-bold text-purple-950 dark:text-cyan-50">
-                Upload Following Data
-              </h2>
-              <p className="text-sm text-purple-750 dark:text-cyan-250">
-                Find your people on the ATmosphere
-              </p>
-            </div>
-          </div>
-          {!wizardCompleted && (
-            <button
-              onClick={onShowWizard}
-              className="text-md text-orange-650 hover:text-orange-500 dark:text-amber-400 dark:hover:text-amber-300 font-medium transition-colors flex items-center space-x-1"
-            >
-              <Settings className="w-4 h-4" />
-              <span>Configure</span>
-            </button>
-          )}
-        </div>
-
         <PlatformSelector onPlatformSelect={handlePlatformSelect} />
 
         <input
···
           aria-label="Upload following data file"
         />
       </div>
-    </div>
+    </Section>
   );
 }

src/components/common/Badge.tsx

···
+import React from "react";
+
+export type BadgeVariant = "stat" | "match" | "info" | "platform" | "status";
+
+interface BadgeProps {
+  children: React.ReactNode;
+  variant?: BadgeVariant;
+  className?: string;
+}
+
+const Badge: React.FC<BadgeProps> = ({
+  children,
+  variant = "info",
+  className = "",
+}) => {
+  const baseStyles = "text-xs px-2 py-0.5 rounded-full font-medium";
+
+  const variantStyles: Record<BadgeVariant, string> = {
+    stat: "bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50",
+    match: "bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50",
+    info: "bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50",
+    platform: "bg-purple-100 dark:bg-cyan-900 text-purple-600 dark:text-cyan-400",
+    status: "bg-orange-650/50 dark:bg-amber-400/50 text-orange-650 dark:text-amber-400",
+  };
+
+  return (
+    <span className={`${baseStyles} ${variantStyles[variant]} ${className}`}>
+      {children}
+    </span>
+  );
+};
+
+export default Badge;

src/components/common/Card.tsx

···
+import React from "react";
+
+export type CardVariant =
+  | "default"
+  | "result"
+  | "upload"
+  | "wizard"
+  | "interactive";
+
+interface CardProps {
+  children: React.ReactNode;
+  variant?: CardVariant;
+  className?: string;
+  onClick?: () => void;
+}
+
+const Card: React.FC<CardProps> = ({
+  children,
+  variant = "default",
+  className = "",
+  onClick,
+}) => {
+  const baseStyles =
+    "rounded-2xl border-2 border-cyan-500/30 dark:border-purple-500/30";
+
+  const variantStyles: Record<CardVariant, string> = {
+    default: "bg-white/50 dark:bg-slate-900/50 backdrop-blur-xl",
+    result: "bg-white/50 dark:bg-slate-900/50 shadow-sm overflow-hidden",
+    upload:
+      "bg-purple-100/20 dark:bg-slate-900/50 hover:bg-purple-100/40 dark:hover:bg-slate-900/70 border-orange-650/50 dark:border-amber-400/50 hover:border-orange-500 dark:hover:border-amber-400 shadow-md hover:shadow-lg transition-all",
+    wizard: "bg-white dark:bg-slate-900 shadow-2xl",
+    interactive: "hover:scale-105 transition-all shadow-lg cursor-pointer",
+  };
+
+  const clickableStyles = onClick
+    ? "cursor-pointer hover:scale-[1.01] transition-transform"
+    : "";
+
+  return (
+    <div
+      className={`${baseStyles} ${variantStyles[variant]} ${clickableStyles} ${className}`}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Card;

src/components/common/EmptyState.tsx

···
+import React from "react";
+import { LucideIcon } from "lucide-react";
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  message?: string;
+  className?: string;
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({
+  icon: Icon,
+  title,
+  message,
+  className = "",
+}) => {
+  return (
+    <div className={`text-center py-12 ${className}`}>
+      <Icon className="w-16 h-16 text-purple-900 dark:text-cyan-100 mx-auto mb-4" />
+      <p className="text-purple-750 dark:text-cyan-250 font-medium">{title}</p>
+      {message && (
+        <p className="text-sm text-purple-950 dark:text-cyan-50 mt-2">
+          {message}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default EmptyState;

src/components/common/IconButton.tsx

···
 interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   icon: LucideIcon;
   label: string;
+  showLabel?: boolean;
   variant?: "primary" | "secondary" | "ghost";
   size?: "sm" | "md" | "lg";
 }
···
     {
       icon: Icon,
       label,
+      showLabel = false,
       variant = "ghost",
       size = "md",
       className = "",
···
     ref,
   ) => {
     const baseStyles =
-      "inline-flex items-center justify-center rounded-full transition-all focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
+      "inline-flex items-center justify-center transition-all focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
 
     const variants = {
       primary:
···
     };
 
     const sizes = {
-      sm: "p-1.5",
-      md: "p-2",
-      lg: "p-3",
+      sm: showLabel ? "px-3 py-1.5 rounded-lg" : "p-1.5 rounded-full",
+      md: showLabel ? "px-4 py-2 rounded-xl" : "p-2 rounded-full",
+      lg: showLabel ? "px-6 py-3 rounded-xl" : "p-3 rounded-full",
     };
 
     const iconSizes = {
···
       lg: "w-6 h-6",
     };
 
+    const textSizes = {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg",
+    };
+
     return (
       <button
         ref={ref}
···
         {...props}
       >
         <Icon className={iconSizes[size]} />
+        {showLabel && (
+          <span className={`ml-2 font-medium ${textSizes[size]}`}>{label}</span>
+        )}
       </button>
     );
   },

src/components/common/PlatformBadge.tsx

···
+import React from "react";
+import { getPlatform } from "../../lib/utils/platform";
+
+interface PlatformBadgeProps {
+  platformKey: string;
+  showIcon?: boolean;
+  showName?: boolean;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+const PlatformBadge: React.FC<PlatformBadgeProps> = ({
+  platformKey,
+  showIcon = true,
+  showName = true,
+  size = "md",
+  className = "",
+}) => {
+  const platform = getPlatform(platformKey);
+  const Icon = platform.icon;
+
+  const iconSizes = {
+    sm: "w-4 h-4",
+    md: "w-6 h-6",
+    lg: "w-8 h-8",
+  };
+
+  const textSizes = {
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg",
+  };
+
+  return (
+    <div className={`flex items-center space-x-2 ${className}`}>
+      {showIcon && (
+        <Icon
+          className={`${iconSizes[size]} text-purple-950 dark:text-cyan-50`}
+        />
+      )}
+      {showName && (
+        <span
+          className={`font-medium text-purple-950 dark:text-cyan-50 capitalize ${textSizes[size]}`}
+        >
+          {platform.name}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default PlatformBadge;

src/components/common/ProgressBar.tsx

···
+import React from "react";
+
+export type ProgressVariant = "search" | "wizard" | "default";
+
+interface ProgressBarProps {
+  current: number;
+  total: number;
+  variant?: ProgressVariant;
+  className?: string;
+  showLabel?: boolean;
+}
+
+const ProgressBar: React.FC<ProgressBarProps> = ({
+  current,
+  total,
+  variant = "default",
+  className = "",
+  showLabel = false,
+}) => {
+  const percentage = total > 0 ? Math.round((current / total) * 100) : 0;
+
+  const containerStyles: Record<ProgressVariant, string> = {
+    default: "w-full bg-slate-200 dark:bg-slate-700 rounded-full h-3",
+    search: "w-full bg-slate-200 dark:bg-slate-700 rounded-full h-3",
+    wizard: "h-2 rounded-full",
+  };
+
+  const barStyles: Record<ProgressVariant, string> = {
+    default:
+      "bg-firefly-banner dark:bg-firefly-banner-dark h-full rounded-full transition-all",
+    search:
+      "bg-firefly-banner dark:bg-firefly-banner-dark h-full rounded-full transition-all",
+    wizard: "bg-orange-500 h-full rounded-full transition-all",
+  };
+
+  return (
+    <div className={className}>
+      {showLabel && (
+        <div className="text-sm text-purple-750 dark:text-cyan-250 mb-2">
+          {percentage}% complete
+        </div>
+      )}
+      <div
+        className={containerStyles[variant]}
+        role="progressbar"
+        aria-valuenow={percentage}
+        aria-valuemin={0}
+        aria-valuemax={100}
+      >
+        <div
+          className={barStyles[variant]}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ProgressBar;

src/components/common/Section.tsx

···
+import React from "react";
+
+interface SectionProps {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+  divider?: boolean;
+  className?: string;
+  action?: React.ReactNode;
+}
+
+const Section: React.FC<SectionProps> = ({
+  title,
+  description,
+  children,
+  divider = false,
+  className = "",
+  action,
+}) => {
+  const containerClasses = divider
+    ? "p-6 border-b-2 border-cyan-500/30 dark:border-purple-500/30"
+    : "p-6";
+
+  return (
+    <div className={`${containerClasses} ${className}`}>
+      <div className="flex items-start justify-between mb-4">
+        <div className="flex items-center space-x-3">
+          <div>
+            <h2 className="text-xl font-bold text-purple-950 dark:text-cyan-50">
+              {title}
+            </h2>
+            {description && (
+              <p className="text-sm text-purple-750 dark:text-cyan-250">
+                {description}
+              </p>
+            )}
+          </div>
+        </div>
+        {action && <div>{action}</div>}
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default Section;

src/components/common/SetupPrompt.tsx

···
+import React from "react";
+import { Settings, ChevronRight } from "lucide-react";
+
+export type SetupPromptVariant = "banner" | "button";
+
+interface SetupPromptProps {
+  variant?: SetupPromptVariant;
+  isCompleted: boolean;
+  onShowWizard: () => void;
+  className?: string;
+}
+
+const SetupPrompt: React.FC<SetupPromptProps> = ({
+  variant = "button",
+  isCompleted,
+  onShowWizard,
+  className = "",
+}) => {
+  if (isCompleted) return null;
+
+  if (variant === "banner") {
+    return (
+      <div
+        className={`bg-firefly-banner-dark dark:bg-firefly-banner-dark rounded-2xl p-6 text-white mb-3 ${className}`}
+      >
+        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+          <div className="flex-1">
+            <h2 className="text-2xl font-bold mb-2">
+              Need help getting started?
+            </h2>
+            <p className="text-white">
+              Run the setup assistant to configure your preferences in minutes.
+            </p>
+          </div>
+          <button
+            onClick={onShowWizard}
+            className="bg-white text-slate-900 px-6 py-3 rounded-xl font-semibold hover:bg-slate-100 transition-all flex items-center space-x-2 whitespace-nowrap shadow-lg"
+          >
+            <span>Start Setup</span>
+            <ChevronRight className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={onShowWizard}
+      className={`text-md text-orange-650 hover:text-orange-500 dark:text-amber-400 dark:hover:text-amber-300 font-medium transition-colors flex items-center space-x-1 ${className}`}
+    >
+      <Settings className="w-4 h-4" />
+      <span>Configure</span>
+    </button>
+  );
+};
+
+export default SetupPrompt;

src/components/common/Stats.tsx

···
+import React from "react";
+import Badge from "./Badge";
+
+interface StatItemProps {
+  value: number | string;
+  label: string;
+  variant?: "default" | "highlight" | "muted";
+  format?: boolean;
+}
+
+export const StatItem: React.FC<StatItemProps> = ({
+  value,
+  label,
+  variant = "default",
+  format = true,
+}) => {
+  const formattedValue =
+    typeof value === "number" && format ? value.toLocaleString() : value;
+
+  const textColors = {
+    default: "text-slate-900 dark:text-slate-100",
+    highlight: "text-orange-500 dark:text-amber-400",
+    muted: "text-slate-600 dark:text-slate-400",
+  };
+
+  return (
+    <div>
+      <div
+        className={`text-2xl font-bold ${textColors[variant]}`}
+        aria-label={`${formattedValue} ${label}`}
+      >
+        {formattedValue}
+      </div>
+      <div className="text-sm text-slate-700 dark:text-slate-300 font-medium">
+        {label}
+      </div>
+    </div>
+  );
+};
+
+interface StatsGroupProps {
+  stats: Array<{
+    value: number | string;
+    label: string;
+    variant?: "default" | "highlight" | "muted";
+  }>;
+  className?: string;
+}
+
+export const StatsGroup: React.FC<StatsGroupProps> = ({
+  stats,
+  className = "",
+}) => {
+  return (
+    <div className={`grid gap-4 text-center ${className}`}>
+      {stats.map((stat, index) => (
+        <StatItem key={index} {...stat} />
+      ))}
+    </div>
+  );
+};
+
+interface StatBadgeProps {
+  value: number | string;
+  label: string;
+  format?: boolean;
+}
+
+export const StatBadge: React.FC<StatBadgeProps> = ({
+  value,
+  label,
+  format = true,
+}) => {
+  const formattedValue =
+    typeof value === "number" && format ? value.toLocaleString() : value;
+
+  return (
+    <Badge variant="stat">
+      {formattedValue} {label}
+    </Badge>
+  );
+};

src/components/common/index.tsx

···
+// Re-export all common components for easier imports
+export { default as Avatar } from "./AvatarWithFallback";
+export { default as Badge } from "./Badge";
+export { default as Button } from "./Button";
+export { default as Card } from "./Card";
+export { default as EmptyState } from "./EmptyState";
+export { default as ErrorBoundary } from "./ErrorBoundary";
+export { default as FollowButton } from "./FollowButton";
+export { default as IconButton } from "./IconButton";
+export { default as Notification } from "./Notification";
+export { default as NotificationContainer } from "./NotificationContainer";
+export { default as PlatformBadge } from "./PlatformBadge";
+export { default as ProgressBar } from "./ProgressBar";
+export { default as Section } from "./Section";
+export { default as SetupPrompt } from "./SetupPrompt";
+export { default as Skeleton } from "./Skeleton";
+
+// Export Stats components
+export { StatItem, StatBadge, StatsGroup } from "./Stats";
+
+// Export Skeletons
+export {
+  SearchResultSkeleton,
+  UploadHistorySkeleton,
+  ProfileSkeleton,
+} from "./LoadingSkeleton";
+
+// Export types
+export type { BadgeVariant } from "./Badge";
+export type { CardVariant } from "./Card";
+export type { SetupPromptVariant } from "./SetupPrompt";
+export type { ProgressVariant } from "./ProgressBar";
+export type { NotificationType } from "./Notification";

src/pages/Loading.tsx

···
 import AppHeader from "../components/AppHeader";
 import { SearchResultSkeleton } from "../components/common/LoadingSkeleton";
 import { getPlatform } from "../lib/utils/platform";
+import { StatsGroup } from "../components/common/Stats";
+import ProgressBar from "../components/common/ProgressBar";
+import PlatformBadge from "../components/common/PlatformBadge";
 
 interface atprotoSession {
   did: string;
···
   onToggleMotion,
 }: LoadingPageProps) {
   const platform = getPlatform(sourcePlatform);
-  const PlatformIcon = platform.icon;
+
+  const statsData = [
+    {
+      value: searchProgress.searched,
+      label: "Searched",
+      variant: "default" as const,
+    },
+    {
+      value: searchProgress.found,
+      label: "Fireflies Found",
+      variant: "highlight" as const,
+    },
+    { value: searchProgress.total, label: "Total", variant: "muted" as const },
+  ];
 
   return (
     <div className="min-h-screen">
···
         <div className="max-w-3xl mx-auto px-4 py-6">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-4">
-              <div className="relative w-12 h-12">
-                <PlatformIcon className="w-10 h-10" />
-              </div>
+              <PlatformBadge
+                platformKey={sourcePlatform}
+                showName={false}
+                size="lg"
+              />
               <div>
                 <h2 className="text-xl font-bold">Finding Your Fireflies</h2>
                 <p className="text-white text-sm">
···
       {/* Progress Stats */}
       <div className="bg-white/95 dark:bg-slate-900 border-b-2 border-cyan-500/30 dark:border-purple-500/30 backdrop-blur-sm">
         <div className="max-w-3xl mx-auto px-4 py-4">
-          <div className="grid grid-cols-3 gap-4 text-center mb-4">
-            <div>
-              <div
-                className="text-2xl font-bold text-slate-900 dark:text-slate-100"
-                aria-label={`${searchProgress.searched} searched`}
-              >
-                {searchProgress.searched}
-              </div>
-              <div className="text-sm text-slate-700 dark:text-slate-300 font-medium">
-                Searched
-              </div>
-            </div>
-            <div>
-              <div
-                className="text-2xl font-bold text-orange-500 dark:text-amber-400"
-                aria-label={`${searchProgress.found} found`}
-              >
-                {searchProgress.found}
-              </div>
-              <div className="text-sm text-slate-700 dark:text-slate-300 font-medium">
-                Fireflies Found
-              </div>
-            </div>
-            <div>
-              <div
-                className="text-2xl font-bold text-slate-600 dark:text-slate-400"
-                aria-label={`${searchProgress.total} total`}
-              >
-                {searchProgress.total}
-              </div>
-              <div className="text-sm text-slate-700 dark:text-slate-300 font-medium">
-                Total
-              </div>
-            </div>
-          </div>
+          <StatsGroup stats={statsData} className="grid-cols-3 mb-4" />
 
-          <div
-            className="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-3"
-            role="progressbar"
-            aria-valuenow={
-              searchProgress.total > 0
-                ? Math.round(
-                    (searchProgress.searched / searchProgress.total) * 100,
-                  )
-                : 0
-            }
-            aria-valuemin={0}
-            aria-valuemax={100}
-          >
-            <div
-              className="bg-firefly-banner dark:bg-firefly-banner-dark h-full rounded-full transition-all"
-              style={{
-                width: `${searchProgress.total > 0 ? (searchProgress.searched / searchProgress.total) * 100 : 0}%`,
-              }}
-            />
-          </div>
+          <ProgressBar
+            current={searchProgress.searched}
+            total={searchProgress.total}
+            variant="search"
+          />
         </div>
       </div>
 

src/pages/Results.tsx

···
 import type { AtprotoAppId } from "../types/settings";
 import { getPlatform, getAtprotoApp } from "../lib/utils/platform";
 import VirtualizedResultsList from "../components/VirtualizedResultsList";
+import Button from "../components/common/Button";
 
 interface atprotoSession {
   did: string;
···
       {/* Action Buttons */}
       <div className="bg-white/95 dark:bg-slate-900 border-b-2 border-cyan-500/30 dark:border-purple-500/30 sticky top-0 z-10 backdrop-blur-sm">
         <div className="max-w-3xl mx-auto px-4 py-3 flex space-x-2">
-          <button
-            onClick={onSelectAll}
-            className="flex-1 bg-orange-600 hover:bg-orange-400 text-white py-3 rounded-xl text-sm font-semibold transition-all shadow-md hover:shadow-lg"
-            type="button"
-          >
+          <Button onClick={onSelectAll} variant="primary" className="flex-1">
             Select All
-          </button>
-          <button
+          </Button>
+          <Button
             onClick={onDeselectAll}
-            className="flex-1 bg-slate-600 dark:bg-slate-700 hover:bg-slate-700 dark:hover:bg-slate-600 text-white py-3 rounded-xl text-sm font-semibold transition-all shadow-md hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-slate-400"
-            type="button"
+            variant="secondary"
+            className="flex-1"
           >
             Clear
-          </button>
+          </Button>
         </div>
       </div>
 

src/pages/Settings.tsx

···
 import { PLATFORMS } from "../config/platforms";
 import { ATPROTO_APPS } from "../config/atprotoApps";
 import type { UserSettings, PlatformDestinations } from "../types/settings";
+import Section from "../components/common/Section";
+import Card from "../components/common/Card";
+import Badge from "../components/common/Badge";
+import PlatformBadge from "../components/common/PlatformBadge";
 
 interface SettingsPageProps {
   userSettings: UserSettings;
···
   return (
     <div className="space-y-0">
       {/* Setup Assistant Section */}
-      <div className="p-6 border-b-2 border-cyan-500/30 dark:border-purple-500/30">
-        <div className="flex items-center space-x-3 mb-4">
-          <div>
-            <h2 className="text-xl font-bold text-purple-950 dark:text-cyan-50">
-              Setup Assistant
-            </h2>
-            <p className="text-sm text-purple-750 dark:text-cyan-250">
-              Quick configuration wizard
-            </p>
-          </div>
-        </div>
-
-        <button
+      <Section
+        title="Setup Assistant"
+        description="Quick configuration wizard"
+        divider
+      >
+        <Card
+          variant="upload"
           onClick={onOpenWizard}
-          className="w-full flex items-start space-x-4 p-4 bg-purple-100/20 dark:bg-slate-900/50 hover:bg-purple-100/40 dark:hover:bg-slate-900/70 rounded-xl transition-all text-left border-2 border-orange-650/50 dark:border-amber-400/50 hover:border-orange-500 dark:hover:border-amber-400 shadow-md hover:shadow-lg"
+          className="w-full flex items-start space-x-4 p-4 text-left"
         >
           <div className="w-12 h-12 bg-firefly-banner dark:bg-firefly-banner-dark rounded-xl flex items-center justify-center flex-shrink-0 shadow-md">
             <SettingsIcon className="w-6 h-6 text-white" />
···
             </p>
           </div>
           <ChevronRight className="w-5 h-5 text-purple-500 dark:text-cyan-400 flex-shrink-0 self-center" />
-        </button>
+        </Card>
 
         {/* Current Configuration */}
         <div className="mt-2 py-2 px-3">
···
               <div className="text-purple-750 dark:text-cyan-250 mb-1">
                 Data Storage
               </div>
-              <div className="font-medium text-purple-950 dark:text-cyan-50">
+              <Badge variant="status">
                 {userSettings.saveData ? "✅ Enabled" : "❌ Disabled"}
-              </div>
+              </Badge>
             </div>
             <div>
               <div className="text-purple-750 dark:text-cyan-250 mb-1">
                 Automation
               </div>
-              <div className="font-medium text-purple-950 dark:text-cyan-50">
+              <Badge variant="status">
                 {userSettings.enableAutomation
                   ? `✅ ${userSettings.automationFrequency}`
                   : "❌ Disabled"}
-              </div>
+              </Badge>
             </div>
             <div>
               <div className="text-purple-750 dark:text-cyan-250 mb-1">
                 Wizard
               </div>
-              <div className="font-medium text-purple-950 dark:text-cyan-50">
+              <Badge variant="status">
                 {userSettings.wizardCompleted ? "✅ Completed" : "⏳ Pending"}
-              </div>
+              </Badge>
             </div>
           </div>
         </div>
-      </div>
+      </Section>
 
       {/* Match Destinations Section */}
-      <div className="p-6 border-b-2 border-cyan-500/30 dark:border-purple-500/30">
-        <div className="flex items-center space-x-3 mb-4">
-          <div>
-            <h2 className="text-xl font-bold text-purple-950 dark:text-cyan-50">
-              Match Destinations
-            </h2>
-            <p className="text-sm text-purple-750 dark:text-cyan-250">
-              Where matches should go for each platform
-            </p>
-          </div>
-        </div>
-
-        <div className="mt-3 px-3 py-2 rounded-lg border border-orange-650/50 dark:border-amber-400/50">
+      <Section
+        title="Match Destinations"
+        description="Where matches should go for each platform"
+        divider
+      >
+        <Card className="mt-3 px-3 py-2 rounded-lg border-orange-650/50 dark:border-amber-400/50">
           <p className="text-sm text-purple-900 dark:text-cyan-100">
             💡 <strong>Tip:</strong> Choose different apps for different
             platforms based on content type. For example, send TikTok matches to
             Spark for video content.
           </p>
-        </div>
+        </Card>
 
         <div className="py-2 space-y-0">
           {Object.entries(PLATFORMS).map(([key, p]) => {
-            const Icon = p.icon;
             const currentDestination =
               userSettings.platformDestinations[
                 key as keyof PlatformDestinations
···
                 key={key}
                 className="flex items-center justify-between px-3 py-2 rounded-xl transition-colors"
               >
-                <div className="flex items-center space-x-3 flex-1">
-                  <Icon className="w-4 h-4 text-purple-950 dark:text-cyan-50 flex-shrink-0" />
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium text-purple-950 dark:text-cyan-50">
-                      {p.name}
-                    </div>
-                  </div>
-                </div>
+                <PlatformBadge
+                  platformKey={key}
+                  size="sm"
+                  className="flex-1 min-w-0"
+                />
                 <select
                   value={currentDestination}
                   onChange={(e) => handleDestinationChange(key, e.target.value)}
···
             );
           })}
         </div>
-      </div>
+      </Section>
 
       {/* Privacy & Data Section */}
-      <div className="p-6">
-        <div className="flex items-center space-x-3 mb-4">
-          <div>
-            <h2 className="text-xl font-bold text-purple-950 dark:text-cyan-50">
-              Privacy & Data
-            </h2>
-            <p className="text-sm text-purple-750 dark:text-cyan-250">
-              Control how your data is stored
-            </p>
-          </div>
-        </div>
-
+      <Section
+        title="Privacy & Data"
+        description="Control how your data is stored"
+      >
         <div className="px-3 space-y-4">
           {/* Save Data Toggle */}
           <div className="">
···
             )}
           </div>
         </div>
-      </div>
+      </Section>
     </div>
   );
 }