diff --git a/components/user/rep/MobileIdentityTabContent.tsx b/components/user/rep/MobileIdentityTabContent.tsx
new file mode 100644
index 0000000000..21290f43cb
--- /dev/null
+++ b/components/user/rep/MobileIdentityTabContent.tsx
@@ -0,0 +1,88 @@
+import type { ActivityLogParams } from "@/components/profile-activity/ProfileActivityLogs";
+import type { ApiCicOverview } from "@/generated/models/ApiCicOverview";
+import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import { formatNumberWithCommas } from "@/helpers/Helpers";
+import { RateMatter } from "@/types/enums";
+import { FingerprintIcon } from "../identity/header/RateNicCta";
+import UserPageIdentityStatementsAddButton from "../identity/statements/add/UserPageIdentityStatementsAddButton";
+import UserPageIdentityStatements from "../identity/statements/UserPageIdentityStatements";
+import UserPageRateWrapper from "../utils/rate/UserPageRateWrapper";
+import UserPageCombinedActivityLog from "./UserPageCombinedActivityLog";
+
+export default function MobileIdentityTabContent({
+ profile,
+ cicOverview,
+ initialActivityLogParams,
+ canEditNic,
+ canEditStatements,
+ onRateNic,
+}: {
+ readonly profile: ApiIdentity;
+ readonly cicOverview: ApiCicOverview | null;
+ readonly initialActivityLogParams: ActivityLogParams;
+ readonly canEditNic: boolean;
+ readonly canEditStatements: boolean;
+ readonly onRateNic: () => void;
+}) {
+ return (
+ <>
+ {canEditNic && (
+
+
+
+
+
+ )}
+
+ {/* Identity Statements */}
+
+
+ ID Statements
+
+ {canEditStatements && (
+
+ )}
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/components/user/rep/MobileRepTabContent.tsx b/components/user/rep/MobileRepTabContent.tsx
new file mode 100644
index 0000000000..fe548f4cea
--- /dev/null
+++ b/components/user/rep/MobileRepTabContent.tsx
@@ -0,0 +1,183 @@
+import type { ActivityLogParams } from "@/components/profile-activity/ProfileActivityLogs";
+import type { ApiRepCategory } from "@/generated/models/ApiRepCategory";
+import type { ApiRepOverview } from "@/generated/models/ApiRepOverview";
+import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import { formatNumberWithCommas } from "@/helpers/Helpers";
+import { RateMatter } from "@/types/enums";
+import type { RepDirection } from "./UserPageRep.helpers";
+import RepDirectionToggle from "./RepDirectionToggle";
+import RepCategoryPill from "./RepCategoryPill";
+import UserPageCombinedActivityLog from "./UserPageCombinedActivityLog";
+import UserPageRateWrapper from "../utils/rate/UserPageRateWrapper";
+
+function RepEmptyState({
+ loading,
+ repDirection,
+}: {
+ readonly loading: boolean;
+ readonly repDirection: RepDirection;
+}) {
+ if (loading) {
+ return (
+
+ );
+ }
+ return (
+
+ {repDirection === "given" ? "No rep given yet." : "No rep received yet."}
+
+ );
+}
+
+export default function MobileRepTabContent({
+ profile,
+ overview,
+ categories,
+ repDirection,
+ onRepDirectionChange,
+ initialActivityLogParams,
+ loading,
+ canEditRep,
+ visibleCount,
+ onShowMore,
+ onGrantRep,
+ onEditCategory,
+}: {
+ readonly profile: ApiIdentity;
+ readonly overview: ApiRepOverview | null;
+ readonly categories: ApiRepCategory[];
+ readonly repDirection: RepDirection;
+ readonly onRepDirectionChange: (direction: RepDirection) => void;
+ readonly initialActivityLogParams: ActivityLogParams;
+ readonly loading: boolean;
+ readonly canEditRep: boolean;
+ readonly visibleCount: number;
+ readonly onShowMore: () => void;
+ readonly onGrantRep: () => void;
+ readonly onEditCategory: (category: string) => void;
+}) {
+ return (
+ <>
+ {canEditRep && repDirection === "received" && (
+
+
+
+
+
+ )}
+
+ {repDirection === "given" &&
+ overview !== null &&
+ overview.authenticated_user_contribution !== null &&
+ overview.authenticated_user_contribution !== 0 && (
+
+
+ Assigned To You:
+
+
+ {overview.authenticated_user_contribution > 0 && "+"}
+ {formatNumberWithCommas(
+ overview.authenticated_user_contribution
+ )}
+
+
+ )}
+
+
+
+ Rep Categories
+
+
+ {/* Received / Given toggle */}
+
+
+
+
+
+ {categories.length > 0 && (
+
+
+ {categories.slice(0, visibleCount).map((cat) => (
+
+ ))}
+ {categories.length > visibleCount && (
+
+ )}
+
+
+ )}
+
+ {categories.length === 0 && (
+
+ )}
+
+
+
+
+
+ );
+}
diff --git a/components/user/rep/MobileTabCards.tsx b/components/user/rep/MobileTabCards.tsx
new file mode 100644
index 0000000000..a98b9b442e
--- /dev/null
+++ b/components/user/rep/MobileTabCards.tsx
@@ -0,0 +1,169 @@
+import { useMemo, type ComponentProps } from "react";
+import type { ApiRepOverview } from "@/generated/models/ApiRepOverview";
+import type { ApiCicOverview } from "@/generated/models/ApiCicOverview";
+import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import { formatNumberWithCommas } from "@/helpers/Helpers";
+import UserCICStatus from "../utils/user-cic-status/UserCICStatus";
+import UserCICTypeIcon from "../utils/user-cic-type/UserCICTypeIcon";
+import OverlappingAvatars from "@/components/common/OverlappingAvatars";
+import { buildRepAvatarItems } from "./buildRepAvatarItems";
+import { getContributorLabel, type RepDirection } from "./UserPageRep.helpers";
+
+type MobileTab = "rep" | "identity";
+
+export default function MobileTabCards({
+ activeTab,
+ onTabChange,
+ overview,
+ cicOverview,
+ profile,
+ repDirection,
+ cicAvatarItems,
+}: {
+ readonly activeTab: MobileTab;
+ readonly onTabChange: (tab: MobileTab) => void;
+ readonly overview: ApiRepOverview | null;
+ readonly cicOverview: ApiCicOverview | null;
+ readonly profile: ApiIdentity;
+ readonly repDirection: RepDirection;
+ readonly cicAvatarItems: ComponentProps
["items"];
+}) {
+ const repAvatarItems = useMemo(
+ () => buildRepAvatarItems(overview?.contributors.data ?? [], 3),
+ [overview?.contributors.data]
+ );
+
+ return (
+
+
+
+
+
+
+
+
+