diff --git a/client/components/onboarding/FollowArms.tsx b/client/components/onboarding/FollowArms.tsx
new file mode 100644
index 00000000..0d464528
--- /dev/null
+++ b/client/components/onboarding/FollowArms.tsx
@@ -0,0 +1,190 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  Zap,
+  Gamepad2,
+  Briefcase,
+  BookOpen,
+  Network,
+  Sparkles,
+  Shield,
+} from "lucide-react";
+
+interface FollowArmsProps {
+  selectedArms: string[];
+  onUpdate: (arms: string[]) => void;
+  nextStep: () => void;
+  prevStep: () => void;
+}
+
+const ARMS = [
+  {
+    id: "labs",
+    name: "AeThex Labs",
+    icon: Zap,
+    color: "text-yellow-400",
+    bgColor: "bg-yellow-500/10",
+    borderColor: "border-yellow-500/30",
+    description: "Research, innovation, and experimental tech",
+  },
+  {
+    id: "gameforge",
+    name: "GameForge",
+    icon: Gamepad2,
+    color: "text-green-400",
+    bgColor: "bg-green-500/10",
+    borderColor: "border-green-500/30",
+    description: "Game development and interactive experiences",
+  },
+  {
+    id: "corp",
+    name: "AeThex Corp",
+    icon: Briefcase,
+    color: "text-blue-400",
+    bgColor: "bg-blue-500/10",
+    borderColor: "border-blue-500/30",
+    description: "Enterprise consulting and professional services",
+  },
+  {
+    id: "foundation",
+    name: "AeThex Foundation",
+    icon: BookOpen,
+    color: "text-red-400",
+    bgColor: "bg-red-500/10",
+    borderColor: "border-red-500/30",
+    description: "Education, mentorship, and community building",
+  },
+  {
+    id: "devlink",
+    name: "Dev-Link",
+    icon: Network,
+    color: "text-cyan-400",
+    bgColor: "bg-cyan-500/10",
+    borderColor: "border-cyan-500/30",
+    description: "Professional networking and opportunities",
+  },
+  {
+    id: "nexus",
+    name: "NEXUS",
+    icon: Sparkles,
+    color: "text-purple-400",
+    bgColor: "bg-purple-500/10",
+    borderColor: "border-purple-500/30",
+    description: "Creative marketplace and artist collaboration",
+  },
+];
+
+export default function FollowArms({
+  selectedArms,
+  onUpdate,
+  nextStep,
+  prevStep,
+}: FollowArmsProps) {
+  const [localSelection, setLocalSelection] = useState(selectedArms);
+
+  const handleToggle = (armId: string) => {
+    setLocalSelection((prev) =>
+      prev.includes(armId) ? prev.filter((a) => a !== armId) : [...prev, armId]
+    );
+  };
+
+  const handleContinue = () => {
+    if (localSelection.length === 0) {
+      alert("Please select at least one arm to follow");
+      return;
+    }
+    onUpdate(localSelection);
+    nextStep();
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <p className="text-muted-foreground">
+          Choose which AeThex arms you want to follow. You can change this
+          anytime in your settings. Select at least one to continue.
+        </p>
+      </div>
+
+      {/* Arms Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {ARMS.map((arm) => {
+          const Icon = arm.icon;
+          const isSelected = localSelection.includes(arm.id);
+
+          return (
+            <div key={arm.id} className="relative">
+              <Card
+                className={`cursor-pointer border-2 transition-all duration-200 hover:border-opacity-100 ${
+                  isSelected
+                    ? `${arm.borderColor} bg-${arm.color}/5`
+                    : "border-border/40 hover:border-border/60"
+                }`}
+                onClick={() => handleToggle(arm.id)}
+              >
+                <CardContent className="p-4">
+                  <div className="flex items-start gap-4">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3 mb-2">
+                        <Icon className={`h-5 w-5 ${arm.color}`} />
+                        <h3 className="font-semibold text-foreground">
+                          {arm.name}
+                        </h3>
+                      </div>
+                      <p className="text-sm text-muted-foreground">
+                        {arm.description}
+                      </p>
+                    </div>
+                    <Checkbox
+                      checked={isSelected}
+                      onCheckedChange={() => handleToggle(arm.id)}
+                      className="mt-1"
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Summary */}
+      {localSelection.length > 0 && (
+        <Card className="bg-aethex-500/10 border-aethex-400/30">
+          <CardContent className="p-4">
+            <p className="text-sm text-aethex-200">
+              You're following <span className="font-bold">{localSelection.length}</span> arm
+              {localSelection.length !== 1 ? "s" : ""}
+              {localSelection.length > 0 && ":"}
+              <span className="ml-2">
+                {localSelection
+                  .map(
+                    (id) =>
+                      ARMS.find((a) => a.id === id)?.name || id
+                  )
+                  .join(", ")}
+              </span>
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Navigation */}
+      <div className="flex gap-3 pt-4">
+        <Button variant="outline" onClick={prevStep} className="flex-1">
+          Back
+        </Button>
+        <Button
+          onClick={handleContinue}
+          className="flex-1 bg-gradient-to-r from-aethex-600 to-neon-blue hover:from-aethex-700 hover:to-neon-blue/90"
+        >
+          Continue
+        </Button>
+      </div>
+    </div>
+  );
+}