diff --git a/__tests__/components/user/rep/UserPageRep.test.tsx b/__tests__/components/user/rep/UserPageRep.test.tsx
index 3e95d3cadd..f7ec122db4 100644
--- a/__tests__/components/user/rep/UserPageRep.test.tsx
+++ b/__tests__/components/user/rep/UserPageRep.test.tsx
@@ -6,11 +6,7 @@ import { render } from "@testing-library/react";
 jest.mock("@tanstack/react-query", () => ({ useQuery: jest.fn() }));
 
 let headerProps: any;
-let newRepProps: any;
-let repsProps: any;
-let tableParams: any[] = [];
 let activityProps: any;
-let rateWrapperProps: any;
 
 jest.mock(
   "@/components/user/rep/header/UserPageRepHeader",
@@ -20,34 +16,21 @@ jest.mock(
   }
 );
 jest.mock(
-  "@/components/user/rep/new-rep/UserPageRepNewRep",
+  "@/components/user/rep/UserPageCombinedActivityLog",
   () => (props: any) => {
-    newRepProps = props;
-    return <div data-testid="newrep" />;
-  }
-);
-jest.mock("@/components/user/rep/reps/UserPageRepReps", () => (props: any) => {
-  repsProps = props;
-  return <div data-testid="reps" />;
-});
-jest.mock(
-  "@/components/user/utils/raters-table/wrapper/ProfileRatersTableWrapper",
-  () => (props: any) => {
-    tableParams.push(props.initialParams);
-    return <div data-testid="table" />;
+    activityProps = props;
+    return <div data-testid="activity" />;
   }
 );
 jest.mock(
-  "@/components/user/rep/UserPageRepActivityLog",
+  "@/components/user/rep/UserPageRepMobile",
   () => (props: any) => {
-    activityProps = props;
-    return <div data-testid="activity" />;
+    return <div data-testid="mobile" />;
   }
 );
 jest.mock(
   "@/components/user/utils/rate/UserPageRateWrapper",
   () => (props: any) => {
-    rateWrapperProps = props;
     return <div data-testid="ratewrapper">{props.children}</div>;
   }
 );
@@ -56,13 +39,7 @@ describe("UserPageRep", () => {
   const queryMock = useQuery as jest.Mock;
 
   beforeEach(() => {
-    headerProps =
-      newRepProps =
-      repsProps =
-      activityProps =
-      rateWrapperProps =
-        undefined;
-    tableParams = [];
+    headerProps = activityProps = undefined;
     queryMock.mockReturnValue({ data: { score: 1 } });
   });
 
@@ -74,19 +51,12 @@ describe("UserPageRep", () => {
         value={{ connectedProfile: { handle: "charlie" } } as any}>
         <UserPageRep
           profile={profile}
-          initialRepReceivedParams={params}
-          initialRepGivenParams={params}
           initialActivityLogParams={params}
         />
       </AuthContext.Provider>
     );
     expect(headerProps.repRates).toEqual({ score: 1 });
-    expect(newRepProps.profile).toBe(profile);
-    expect(newRepProps.repRates).toEqual({ score: 1 });
-    expect(repsProps.profile).toBe(profile);
-    expect(repsProps.repRates).toEqual({ score: 1 });
-    expect(tableParams.slice(0, 2)).toEqual([params, params]);
+    expect(headerProps.profile).toBe(profile);
     expect(activityProps.initialActivityLogParams).toBe(params);
-    expect(rateWrapperProps.profile).toBe(profile);
   });
 });
diff --git a/__tests__/components/user/rep/header/UserPageRepHeader.test.tsx b/__tests__/components/user/rep/header/UserPageRepHeader.test.tsx
index 9400b97d1c..1d17256f5a 100644
--- a/__tests__/components/user/rep/header/UserPageRepHeader.test.tsx
+++ b/__tests__/components/user/rep/header/UserPageRepHeader.test.tsx
@@ -20,6 +20,6 @@ describe('UserPageRepHeader', () => {
 
   it('renders without repRates', () => {
     const { container } = render(<UserPageRepHeader repRates={null} profile={mockProfile} />);
-    expect(container).toHaveTextContent('Reputation');
+    expect(container).toHaveTextContent('Rep');
   });
 });
diff --git a/__tests__/components/user/rep/new-rep/UserPageRepNewRepSearchHeader.test.tsx b/__tests__/components/user/rep/new-rep/UserPageRepNewRepSearchHeader.test.tsx
deleted file mode 100644
index 0a354db338..0000000000
--- a/__tests__/components/user/rep/new-rep/UserPageRepNewRepSearchHeader.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
-import UserPageRepNewRepSearchHeader from '@/components/user/rep/new-rep/UserPageRepNewRepSearchHeader';
-import { AuthContext } from '@/components/auth/Auth';
-import { useQuery } from '@tanstack/react-query';
-import { ApiProfileProxyActionType } from '@/generated/models/ApiProfileProxyActionType';
-
-jest.mock('@tanstack/react-query', () => ({ useQuery: jest.fn() }));
-jest.mock('next/link', () => ({ __esModule: true, default: ({ href, children }: any) => <a href={href}>{children}</a> }));
-jest.mock('@/components/utils/CommonInfoBox', () => (p: any) => <div data-testid="infobox">{p.message}</div>);
-
-const useQueryMock = useQuery as jest.Mock;
-
-describe('UserPageRepNewRepSearchHeader', () => {
-  const profile = { handle: 'bob', query: 'bob' } as any;
-  const repRates = { rep_rates_left_for_rater: 5, total_rep_rating_by_rater: 3 } as any;
-
-  it('shows available rep when no proxy', () => {
-    useQueryMock.mockReturnValue({});
-    render(
-      <AuthContext.Provider value={{ activeProfileProxy: null } as any}>
-        <UserPageRepNewRepSearchHeader repRates={repRates} profile={profile} />
-      </AuthContext.Provider>
-    );
-    expect(screen.getByText('Your available Rep:')).toBeInTheDocument();
-    expect(screen.getByText('5')).toBeInTheDocument();
-  });
-
-  it('shows proxy info and info box when credit is zero', async () => {
-    useQueryMock.mockReturnValue({ data: { rep_rates_left_for_rater: 0, total_rep_rating_by_rater: 0 } });
-    const proxy = {
-      created_by: { handle: 'alice' },
-      actions: [{ action_type: ApiProfileProxyActionType.AllocateRep, credit_amount: 1, credit_spent: 1 }],
-    } as any;
-    render(
-      <AuthContext.Provider value={{ activeProfileProxy: proxy } as any}>
-        <UserPageRepNewRepSearchHeader repRates={repRates} profile={profile} />
-      </AuthContext.Provider>
-    );
-    await waitFor(() => expect(screen.getByText('You are acting as proxy for:')).toBeInTheDocument());
-    expect(screen.getByRole('link')).toHaveAttribute('href', '/alice');
-    expect(screen.getByTestId('infobox')).toHaveTextContent("You don't have any rep left to rate");
-  });
-});
diff --git a/__tests__/components/user/rep/reps/UserPageRepReps.test.tsx b/__tests__/components/user/rep/reps/UserPageRepReps.test.tsx
deleted file mode 100644
index ef400d72b5..0000000000
--- a/__tests__/components/user/rep/reps/UserPageRepReps.test.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { AuthContext } from "@/components/auth/Auth";
-import UserPageRepReps from "@/components/user/rep/reps/UserPageRepReps";
-import { ApiProfileProxyActionType } from "@/generated/models/ApiProfileProxyActionType";
-import { render, screen } from "@testing-library/react";
-
-function setMatchMedia(matches: boolean) {
-  Object.defineProperty(window, "matchMedia", {
-    writable: true,
-    value: jest.fn().mockReturnValue({
-      matches,
-      addListener: jest.fn(),
-      removeListener: jest.fn(),
-    }),
-  });
-}
-
-const sampleReps = [
-  { category: "a", rating: 5, contributor_count: 2, rater_contribution: 1 },
-  { category: "b", rating: 5, contributor_count: 3, rater_contribution: 0 },
-  { category: "c", rating: 10, contributor_count: 1, rater_contribution: 0 },
-];
-
-const profile = { handle: "target" } as any;
-
-function renderComponent(authValue: any) {
-  return render(
-    <AuthContext.Provider value={{ ...authValue }}>
-      <UserPageRepReps
-        repRates={{ rating_stats: sampleReps } as any}
-        profile={profile}
-      />
-    </AuthContext.Provider>
-  );
-}
-
-describe("UserPageRepReps", () => {
-  beforeEach(() => {
-    setMatchMedia(false);
-  });
-  it("sorts reps by rating and contributor count", () => {
-    renderComponent({ connectedProfile: null, activeProfileProxy: null });
-
-    const items = screen.getAllByRole("button");
-    // first top rep should be rating 10 (category c)
-    expect(items[0]).toHaveTextContent("c");
-  });
-
-  it("disables editing when viewing own profile", () => {
-    renderComponent({
-      connectedProfile: { handle: "target" },
-      activeProfileProxy: null,
-    });
-    const button = screen.getAllByRole("button")[0];
-    expect(button).toBeDisabled();
-  });
-
-  it("allows editing when proxy has allocate rep action", () => {
-    renderComponent({
-      connectedProfile: { handle: "me" },
-      activeProfileProxy: {
-        created_by: { handle: "other" },
-        actions: [{ action_type: ApiProfileProxyActionType.AllocateRep }],
-      },
-    });
-    const button = screen.getAllByRole("button")[0];
-    expect(button).toBeEnabled();
-  });
-});
diff --git a/__tests__/components/user/rep/reps/table/UserPageRepRepsTable.test.tsx b/__tests__/components/user/rep/reps/table/UserPageRepRepsTable.test.tsx
deleted file mode 100644
index 574cfbae5d..0000000000
--- a/__tests__/components/user/rep/reps/table/UserPageRepRepsTable.test.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import UserPageRepRepsTable, { RepsTableSort } from '@/components/user/rep/reps/table/UserPageRepRepsTable';
-
-let latestReps: any[] = [];
-jest.mock('@/components/user/rep/reps/table/UserPageRepRepsTableBody', () => (props: any) => { latestReps = props.reps; return <tbody data-testid="body" />; });
-jest.mock('@/components/user/rep/reps/table/UserPageRepRepsTableHeader', () => (props: any) => (
-  <thead>
-    <tr>
-      <th><button onClick={() => props.onSortTypeClick(RepsTableSort.REP)}>rep</button></th>
-      <th><button onClick={() => props.onSortTypeClick(RepsTableSort.RATERS)}>raters</button></th>
-      <th><button onClick={() => props.onSortTypeClick(RepsTableSort.MY_RATES)}>my</button></th>
-    </tr>
-  </thead>
-));
-
-const reps = [
-  { category: 'a', rating: 1, contributor_count: 2, rater_contribution: 5 },
-  { category: 'b', rating: 3, contributor_count: 1, rater_contribution: 0 }
-];
-
-it('sorts by rating descending by default and toggles sort on header click', async () => {
-  render(<table><UserPageRepRepsTable reps={[...reps]} profile={{} as any} canEditRep={true} /></table>);
-  expect(latestReps[0].category).toBe('b'); // rating 3 first
-  await userEvent.click(screen.getByText('raters'));
-  expect(latestReps[0].category).toBe('a'); // contributor_count 2 first
-});
-
-it('reverts to REP sort when MY_RATES clicked without permission', async () => {
-  render(<table><UserPageRepRepsTable reps={[...reps]} profile={{} as any} canEditRep={false} /></table>);
-  await userEvent.click(screen.getByText('my'));
-  expect(latestReps[0].category).toBe('b'); // should remain REP DESC
-});
diff --git a/components/user/rep/RepCategoryPill.tsx b/components/user/rep/RepCategoryPill.tsx
new file mode 100644
index 0000000000..de70adf8db
--- /dev/null
+++ b/components/user/rep/RepCategoryPill.tsx
@@ -0,0 +1,81 @@
+import type { RatingStats } from "@/entities/IProfile";
+import { formatNumberWithCommas } from "@/helpers/Helpers";
+import type { MouseEvent } from "react";
+import TopRaterAvatars from "./header/TopRaterAvatars";
+
+const stopPropagation = (e: MouseEvent) => e.stopPropagation();
+
+export default function RepCategoryPill({
+  rep,
+  profileHandle,
+  canEdit,
+  onEdit,
+  compact = false,
+}: {
+  readonly rep: RatingStats;
+  readonly profileHandle: string;
+  readonly canEdit: boolean;
+  readonly onEdit: (category: string) => void;
+  readonly compact?: boolean;
+}) {
+  const paddingClass = compact ? "tw-px-3 tw-py-2" : "tw-px-4 tw-py-2.5";
+
+  const content = (
+    <>
+      <span className="tw-inline-flex tw-items-center tw-gap-1.5">
+        <span className="tw-text-sm tw-font-medium tw-text-white tw-text-left">
+          {rep.category}
+        </span>
+        <span className="tw-text-sm tw-font-medium tw-text-iron-400 tw-transition-colors group-hover:tw-text-iron-300">
+          {formatNumberWithCommas(rep.rating)}
+        </span>
+      </span>
+      <span className="tw-text-xs tw-text-white/20">&middot;</span>
+      <span className="tw-inline-flex tw-items-center tw-gap-1.5">
+        <span className="tw-pointer-events-none desktop-hover:tw-pointer-events-auto">
+          <TopRaterAvatars
+            handleOrWallet={profileHandle}
+            category={rep.category}
+            count={5}
+            onAvatarClick={stopPropagation}
+          />
+        </span>
+        <span className="tw-whitespace-nowrap tw-text-xs tw-font-medium tw-text-iron-400">
+          {formatNumberWithCommas(rep.contributor_count)}{" "}
+          {rep.contributor_count === 1 ? "rater" : "raters"}
+        </span>
+      </span>
+      {!!rep.rater_contribution && (
+        <>
+          <span className="tw-text-xs tw-text-white/20">&middot;</span>
+          <span className="tw-whitespace-nowrap tw-text-xs tw-font-medium tw-text-iron-400">
+            My Rate:{" "}
+            <span className="tw-font-medium tw-text-primary-400">
+              {formatNumberWithCommas(rep.rater_contribution)}
+            </span>
+          </span>
+        </>
+      )}
+    </>
+  );
+
+  const baseClasses = `group tw-inline-flex tw-items-center tw-gap-2.5 tw-rounded-lg tw-border tw-border-solid tw-border-white/10 tw-bg-white/5 tw-backdrop-blur-md tw-transition-all tw-duration-300 tw-ease-out ${paddingClass}`;
+
+  if (canEdit) {
+    return (
+      <button
+        type="button"
+        onClick={() => onEdit(rep.category)}
+        className={`${baseClasses} tw-cursor-pointer hover:tw-border-white/20 hover:tw-bg-white/10 hover:tw-shadow-md`}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <div className={`${baseClasses} tw-cursor-default`}>
+      {content}
+    </div>
+  );
+}
diff --git a/components/user/rep/UserPageRep.tsx b/components/user/rep/UserPageRep.tsx
index 617ccb9eed..a064dde76b 100644
--- a/components/user/rep/UserPageRep.tsx
+++ b/components/user/rep/UserPageRep.tsx
@@ -18,7 +18,6 @@ import UserPageRateWrapper from "../utils/rate/UserPageRateWrapper";
 import UserPageCombinedActivityLog from "./UserPageCombinedActivityLog";
 import UserPageRepHeader from "./header/UserPageRepHeader";
 import UserPageRepMobile from "./UserPageRepMobile";
-import UserPageRepReps from "./reps/UserPageRepReps";
 export default function UserPageRep({
   profile,
   initialActivityLogParams,
@@ -65,27 +64,11 @@ export default function UserPageRep({
           {/* Left Column - Rep Content */}
           <div className="tw-min-w-0">
             <UserPageRepHeader repRates={repRates ?? null} profile={profile} />
-            <UserPageRepReps repRates={repRates ?? null} profile={profile} />
             <div className="tw-mt-6 lg:tw-mt-8">
               <UserPageCombinedActivityLog
                 initialActivityLogParams={initialActivityLogParams}
               />
             </div>
-
-            {/* Rep raters tables - commented out for now
-            <div className="tw-mt-6 tw-grid tw-grid-cols-1 tw-gap-x-8 tw-gap-y-6 lg:tw-mt-8 lg:tw-gap-x-10 lg:tw-gap-y-10 xl:tw-grid-cols-2">
-              <div>
-                <ProfileRatersTableWrapper
-                  initialParams={initialRepGivenParams}
-                />
-              </div>
-              <div>
-                <ProfileRatersTableWrapper
-                  initialParams={initialRepReceivedParams}
-                />
-              </div>
-            </div>
-            */}
           </div>
 
           {/* Right Sidebar - Identity Card */}
@@ -116,18 +99,6 @@ export default function UserPageRep({
           </div>
         </div>
 
-        {/* CIC raters tables - commented out for now
-        <div className="tw-mt-6 tw-grid tw-grid-cols-1 tw-gap-x-8 tw-gap-y-6 lg:tw-mt-8 lg:tw-gap-x-10 lg:tw-gap-y-10 xl:tw-grid-cols-2">
-          <div>
-            <ProfileRatersTableWrapper initialParams={initialCICGivenParams} />
-          </div>
-          <div>
-            <ProfileRatersTableWrapper
-              initialParams={initialCICReceivedParams}
-            />
-          </div>
-        </div>
-        */}
       </div>
     </div>
   );
diff --git a/components/user/rep/UserPageRepMobile.tsx b/components/user/rep/UserPageRepMobile.tsx
index 907b25c5ee..6a3e0f51be 100644
--- a/components/user/rep/UserPageRepMobile.tsx
+++ b/components/user/rep/UserPageRepMobile.tsx
@@ -26,8 +26,9 @@ import UserPageRateWrapper from "../utils/rate/UserPageRateWrapper";
 import UserCICStatus from "../utils/user-cic-status/UserCICStatus";
 import UserCICTypeIcon from "../utils/user-cic-type/UserCICTypeIcon";
 import TopRaterAvatars from "./header/TopRaterAvatars";
-import UserPageRepNewRep from "./new-rep/UserPageRepNewRep";
-import UserPageRepRepsTable from "./reps/table/UserPageRepRepsTable";
+import UserPageRepModifyModal from "./modify-rep/UserPageRepModifyModal";
+import GrantRepDialog from "./new-rep/GrantRepDialog";
+import RepCategoryPill from "./RepCategoryPill";
 import UserPageCombinedActivityLog from "./UserPageCombinedActivityLog";
 import {
   getCanEditRep,
@@ -52,6 +53,8 @@ export default function UserPageRepMobile({
   const [activeTab, setActiveTab] = useState<MobileTab>("rep");
   const [isGrantRepOpen, setIsGrantRepOpen] = useState(false);
   const [isNicRateOpen, setIsNicRateOpen] = useState(false);
+  const [visibleCount, setVisibleCount] = useState(5);
+  const [editCategory, setEditCategory] = useState<string | null>(null);
 
   const { data: nicRatings } = useQuery<Page<RatingWithProfileInfoAndLevel>>({
     queryKey: [
@@ -93,6 +96,10 @@ export default function UserPageRepMobile({
     return () => mq.removeEventListener("change", handler);
   }, []);
 
+  useEffect(() => {
+    setVisibleCount(5);
+  }, [repRates?.rating_stats]);
+
   // --- derived: sorted reps, can-edit flags ---
   const reps = useMemo(
     () => sortRepsByRatingAndContributors(repRates?.rating_stats ?? []),
@@ -240,7 +247,7 @@ export default function UserPageRepMobile({
               </span>
             </div>
             <div className="tw-mt-2 tw-flex tw-items-center tw-gap-2">
-              <div className="tw-pointer-events-none">
+              <div className="tw-pointer-events-none desktop-hover:tw-pointer-events-auto">
                 <TopRaterAvatars
                   handleOrWallet={profile.handle ?? ""}
                   matter={RateMatter.NIC}
@@ -268,6 +275,36 @@ export default function UserPageRepMobile({
             exit={{ opacity: 0 }}
             transition={{ duration: 0.15, ease: "easeInOut" }}
           >
+            {/* Rep Categories */}
+            {reps.length > 0 && (
+              <div className="tw-mt-4">
+                <div className="tw-mb-3 tw-whitespace-nowrap tw-text-xs tw-uppercase tw-tracking-wider tw-text-iron-100 tw-font-semibold">
+                  Rep Categories
+                </div>
+                <div className="tw-flex tw-flex-wrap tw-gap-2">
+                  {reps.slice(0, visibleCount).map((rep) => (
+                    <RepCategoryPill
+                      key={rep.category}
+                      rep={rep}
+                      profileHandle={profile.handle ?? ""}
+                      canEdit={canEditRep}
+                      onEdit={setEditCategory}
+                      compact
+                    />
+                  ))}
+                  {reps.length > visibleCount && (
+                    <button
+                      type="button"
+                      onClick={() => setVisibleCount((prev) => prev + 10)}
+                      className="tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-2.5 tw-rounded-lg tw-border tw-border-solid tw-border-iron-700/60 tw-bg-iron-900/60 tw-px-4 tw-py-2.5 tw-text-xs tw-font-semibold tw-text-iron-400 tw-transition-colors hover:tw-border-iron-600/60 hover:tw-bg-iron-800/60 hover:tw-text-iron-300"
+                    >
+                      +{reps.length - visibleCount} more
+                    </button>
+                  )}
+                </div>
+              </div>
+            )}
+
             {canEditRep && (
               <div className="tw-mt-4">
                 <UserPageRateWrapper
@@ -277,7 +314,7 @@ export default function UserPageRepMobile({
                 >
                   <div className="tw-flex tw-items-center tw-justify-between tw-rounded-xl tw-border tw-border-solid tw-border-blue-500/20 tw-bg-blue-400/5 tw-px-5 tw-py-3">
                     <span className="tw-text-xs tw-font-medium tw-text-blue-300/70">
-                      Add skill to this identity
+                      Add rep to this identity
                     </span>
                     <button
                       onClick={() => setIsGrantRepOpen(true)}
@@ -292,7 +329,6 @@ export default function UserPageRepMobile({
                         strokeLinecap="round"
                         strokeLinejoin="round"
                         aria-hidden="true"
-                        xmlns="http://www.w3.org/2000/svg"
                       >
                         <path d="M12 5v14M5 12h14" />
                       </svg>
@@ -303,18 +339,6 @@ export default function UserPageRepMobile({
               </div>
             )}
 
-            {/* Rep Table */}
-            {!!reps.length && (
-              <div className="tw-mt-4">
-                <UserPageRepRepsTable
-                  reps={reps}
-                  profile={profile}
-                  canEditRep={canEditRep}
-                  initialCount={5}
-                />
-              </div>
-            )}
-
             <div className="tw-mt-6">
               <UserPageCombinedActivityLog
                 initialActivityLogParams={initialActivityLogParams}
@@ -379,31 +403,12 @@ export default function UserPageRepMobile({
       </AnimatePresence>
 
       {/* Grant Rep Bottom Sheet */}
-      <MobileWrapperDialog
-        title="Grant Rep"
+      <GrantRepDialog
+        profile={profile}
+        repRates={repRates}
         isOpen={isGrantRepOpen}
         onClose={() => setIsGrantRepOpen(false)}
-        tabletModal
-      >
-        <div className="tw-px-4 sm:tw-px-6">
-          <UserPageRateWrapper profile={profile} type={RateMatter.REP}>
-            <UserPageRepNewRep
-              profile={profile}
-              repRates={repRates}
-              onSuccess={() => setIsGrantRepOpen(false)}
-            />
-          </UserPageRateWrapper>
-          <div className="tw-mt-3">
-            <button
-              onClick={() => setIsGrantRepOpen(false)}
-              type="button"
-              className="tw-w-full tw-cursor-pointer tw-rounded-lg tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900 tw-px-4 tw-py-3 tw-text-sm tw-font-semibold tw-text-white tw-transition tw-duration-300 tw-ease-out hover:tw-bg-iron-800"
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
-      </MobileWrapperDialog>
+      />
 
       {/* Rate NIC Bottom Sheet */}
       <MobileWrapperDialog
@@ -431,6 +436,14 @@ export default function UserPageRepMobile({
           </div>
         </div>
       </MobileWrapperDialog>
+
+      {canEditRep && editCategory && (
+        <UserPageRepModifyModal
+          profile={profile}
+          category={editCategory}
+          onClose={() => setEditCategory(null)}
+        />
+      )}
     </div>
   );
 }
diff --git a/components/user/rep/header/UserPageRepHeader.tsx b/components/user/rep/header/UserPageRepHeader.tsx
index b2a7997da2..05148b3026 100644
--- a/components/user/rep/header/UserPageRepHeader.tsx
+++ b/components/user/rep/header/UserPageRepHeader.tsx
@@ -1,19 +1,18 @@
 "use client";
 
 import { AuthContext } from "@/components/auth/Auth";
-import type { ApiProfileRepRatesState, RatingStats } from "@/entities/IProfile";
+import type { ApiProfileRepRatesState } from "@/entities/IProfile";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
 import { formatNumberWithCommas } from "@/helpers/Helpers";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
+import RepCategoryPill from "../RepCategoryPill";
 import UserPageRepModifyModal from "../modify-rep/UserPageRepModifyModal";
-import TopRaterAvatars from "./TopRaterAvatars";
+import GrantRepDialog from "../new-rep/GrantRepDialog";
 import {
   getCanEditRep,
   sortRepsByRatingAndContributors,
 } from "../UserPageRep.helpers";
 
-const TOP_REPS_COUNT = 5;
-
 export default function UserPageRepHeader({
   repRates,
   profile,
@@ -23,48 +22,32 @@ export default function UserPageRepHeader({
 }) {
   const { connectedProfile, activeProfileProxy } = useContext(AuthContext);
 
-  const [topReps, setTopReps] = useState<RatingStats[]>(
-    sortRepsByRatingAndContributors(repRates?.rating_stats ?? []).slice(
-      0,
-      TOP_REPS_COUNT
-    )
+  const allReps = useMemo(
+    () => sortRepsByRatingAndContributors(repRates?.rating_stats ?? []),
+    [repRates?.rating_stats]
   );
 
+  const [visibleCount, setVisibleCount] = useState(5);
+
   useEffect(() => {
-    setTopReps(
-      sortRepsByRatingAndContributors(repRates?.rating_stats ?? []).slice(
-        0,
-        TOP_REPS_COUNT
-      )
-    );
+    setVisibleCount(5);
   }, [repRates?.rating_stats]);
 
-  const [canEditRep, setCanEditRep] = useState<boolean>(
-    getCanEditRep({
-      myProfile: connectedProfile,
-      targetProfile: profile,
-      activeProfileProxy,
-    })
-  );
+  const visibleReps = allReps.slice(0, visibleCount);
+  const hasMore = allReps.length > visibleCount;
 
-  useEffect(() => {
-    setCanEditRep(
+  const canEditRep = useMemo(
+    () =>
       getCanEditRep({
         myProfile: connectedProfile,
         targetProfile: profile,
         activeProfileProxy,
-      })
-    );
-  }, [connectedProfile, profile, activeProfileProxy]);
+      }),
+    [connectedProfile, profile, activeProfileProxy]
+  );
 
   const [editCategory, setEditCategory] = useState<string | null>(null);
-
-  const openEditCategory = (category: string) => {
-    if (!canEditRep) {
-      return;
-    }
-    setEditCategory(category);
-  };
+  const [isGrantRepOpen, setIsGrantRepOpen] = useState(false);
 
   return (
     <>
@@ -103,56 +86,50 @@ export default function UserPageRepHeader({
             </div>
           </div>
 
-          {topReps.length > 0 && (
+          {(visibleReps.length > 0 || canEditRep) && (
             <div className="tw-mt-6 tw-border-b-0 tw-border-l-0 tw-border-r-0 tw-border-t tw-border-solid tw-border-white/10 tw-pt-6">
               <div className="tw-mb-4 tw-text-xs tw-font-semibold tw-uppercase tw-tracking-wider tw-text-iron-500">
-                Top Rep
+                Rep Categories
               </div>
               <div className="tw-flex tw-flex-wrap tw-gap-3">
-                {topReps.map((rep) => (
-                  <div
-                    key={rep.category}
-                    className={`group tw-inline-flex tw-items-center tw-gap-2.5 tw-rounded-lg tw-border tw-border-solid tw-border-iron-700/60 tw-bg-iron-900/60 tw-px-4 tw-py-2.5 tw-transition-colors ${
-                      canEditRep
-                        ? "tw-cursor-pointer hover:tw-border-iron-600/60 hover:tw-bg-iron-800/60"
-                        : "tw-cursor-default"
-                    }`}
+                {canEditRep && (
+                  <button
+                    type="button"
+                    onClick={() => setIsGrantRepOpen(true)}
+                    className="tw-group tw-inline-flex tw-h-11 tw-cursor-pointer tw-items-center tw-justify-center tw-gap-x-1.5 tw-rounded-lg tw-border tw-border-dashed tw-border-white/10 tw-bg-transparent tw-px-4 tw-text-sm tw-font-medium tw-text-iron-400 tw-transition-all tw-duration-300 tw-ease-out hover:tw-border-white/30 hover:tw-bg-white/5 hover:tw-text-white"
                   >
-                    {canEditRep ? (
-                      <button
-                        type="button"
-                        onClick={() => openEditCategory(rep.category)}
-                        className="tw-inline-flex tw-items-center tw-gap-2.5 tw-appearance-none tw-border-0 tw-bg-transparent tw-p-0 tw-text-left tw-text-inherit tw-cursor-pointer focus:tw-outline-none"
-                      >
-                        <span className="tw-text-sm tw-font-semibold tw-text-iron-100">
-                          {rep.category}
-                        </span>
-                        <span className="tw-text-sm tw-font-semibold tw-text-iron-300 group-hover:tw-text-iron-200">
-                          {formatNumberWithCommas(rep.rating)}
-                        </span>
-                      </button>
-                    ) : (
-                      <div className="tw-inline-flex tw-items-center tw-gap-2.5">
-                        <span className="tw-text-sm tw-font-semibold tw-text-iron-100">
-                          {rep.category}
-                        </span>
-                        <span className="tw-text-sm tw-font-semibold tw-text-iron-300 group-hover:tw-text-iron-200">
-                          {formatNumberWithCommas(rep.rating)}
-                        </span>
-                      </div>
-                    )}
-                    <span className="tw-text-xs tw-text-iron-600">·</span>
-                    <TopRaterAvatars
-                      handleOrWallet={profile.handle ?? ""}
-                      category={rep.category}
-                      count={5}
-                    />
-                    <span className="tw-whitespace-nowrap tw-text-xs tw-font-normal tw-text-iron-400">
-                      {formatNumberWithCommas(rep.contributor_count)}{" "}
-                      {rep.contributor_count === 1 ? "rater" : "raters"}
-                    </span>
-                  </div>
+                    <svg
+                      className="-tw-ml-1 tw-h-4 tw-w-4 tw-text-iron-500 tw-transition-colors group-hover:tw-text-white"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M12 5v14M5 12h14" />
+                    </svg>
+                    <span>Add new</span>
+                  </button>
+                )}
+                {visibleReps.map((rep) => (
+                  <RepCategoryPill
+                    key={rep.category}
+                    rep={rep}
+                    profileHandle={profile.handle ?? ""}
+                    canEdit={canEditRep}
+                    onEdit={setEditCategory}
+                  />
                 ))}
+                {hasMore && (
+                  <button
+                    type="button"
+                    onClick={() => setVisibleCount((prev) => prev + 10)}
+                    className="tw-inline-flex tw-h-11 tw-cursor-pointer tw-items-center tw-gap-2 tw-rounded-lg tw-border tw-border-solid tw-border-white/10 tw-bg-white/5 tw-px-4 tw-text-sm tw-font-medium tw-text-iron-400 tw-backdrop-blur-md tw-transition-all tw-duration-300 tw-ease-out hover:tw-border-white/20 hover:tw-bg-white/10 hover:tw-text-white"
+                  >
+                    +{allReps.length - visibleCount} more
+                  </button>
+                )}
               </div>
             </div>
           )}
@@ -166,6 +143,13 @@ export default function UserPageRepHeader({
           onClose={() => setEditCategory(null)}
         />
       )}
+
+      <GrantRepDialog
+        profile={profile}
+        repRates={repRates}
+        isOpen={isGrantRepOpen}
+        onClose={() => setIsGrantRepOpen(false)}
+      />
     </>
   );
 }
diff --git a/components/user/rep/new-rep/GrantRepDialog.tsx b/components/user/rep/new-rep/GrantRepDialog.tsx
new file mode 100644
index 0000000000..d983f30aa0
--- /dev/null
+++ b/components/user/rep/new-rep/GrantRepDialog.tsx
@@ -0,0 +1,46 @@
+import type { ApiProfileRepRatesState } from "@/entities/IProfile";
+import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import { RateMatter } from "@/types/enums";
+import MobileWrapperDialog from "@/components/mobile-wrapper-dialog/MobileWrapperDialog";
+import UserPageRateWrapper from "../../utils/rate/UserPageRateWrapper";
+import UserPageRepNewRep from "./UserPageRepNewRep";
+
+export default function GrantRepDialog({
+  profile,
+  repRates,
+  isOpen,
+  onClose,
+}: {
+  readonly profile: ApiIdentity;
+  readonly repRates: ApiProfileRepRatesState | null;
+  readonly isOpen: boolean;
+  readonly onClose: () => void;
+}) {
+  return (
+    <MobileWrapperDialog
+      title="Grant Rep"
+      isOpen={isOpen}
+      onClose={onClose}
+      tabletModal
+    >
+      <div className="tw-px-4 sm:tw-px-6">
+        <UserPageRateWrapper profile={profile} type={RateMatter.REP}>
+          <UserPageRepNewRep
+            profile={profile}
+            repRates={repRates}
+            onSuccess={onClose}
+          />
+        </UserPageRateWrapper>
+        <div className="tw-mt-3">
+          <button
+            onClick={onClose}
+            type="button"
+            className="tw-w-full tw-cursor-pointer tw-rounded-lg tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900 tw-px-4 tw-py-3 tw-text-sm tw-font-semibold tw-text-white tw-transition tw-duration-300 tw-ease-out hover:tw-bg-iron-800"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </MobileWrapperDialog>
+  );
+}
diff --git a/components/user/rep/new-rep/UserPageRepNewRepSearch.tsx b/components/user/rep/new-rep/UserPageRepNewRepSearch.tsx
index 2c413b2d92..fd85a17053 100644
--- a/components/user/rep/new-rep/UserPageRepNewRepSearch.tsx
+++ b/components/user/rep/new-rep/UserPageRepNewRepSearch.tsx
@@ -262,14 +262,9 @@ export default function UserPageRepNewRepSearch({
       <div className="tw-w-full">
         <div className="tw-w-full">
           <div ref={listRef} className="tw-w-full">
-            <div className="tw-w-full tw-relative lg:tw-rounded-xl tw-bg-iron-950 lg:tw-border lg:tw-border-solid lg:tw-border-white/5 lg:tw-px-4 lg:tw-py-5">
+            <div className="tw-w-full tw-relative tw-bg-iron-950">
               <div
                 className="tw-flex tw-items-center tw-flex-wrap tw-justify-between tw-gap-y-1.5 tw-gap-x-4">
-                <label
-                  htmlFor="search-rep"
-                  className="tw-hidden lg:tw-block tw-text-xs tw-font-medium tw-text-iron-500">
-                  Grant Rep
-                </label>
                 <div className="tw-flex tw-flex-wrap tw-items-center tw-gap-x-3 tw-gap-y-2 tw-text-xs tw-text-iron-500 tw-font-medium">
                   <span>
                     <span>Your available Rep:</span>
@@ -291,10 +286,10 @@ export default function UserPageRepNewRepSearch({
                   </span>
                 </div>
               </div>
-              <div className="tw-flex tw-flex-col lg:tw-flex-row tw-items-stretch lg:tw-items-end tw-gap-3 tw-mt-3">
+              <div className="tw-flex tw-flex-col tw-items-stretch tw-gap-3 tw-mt-3">
                 <form
                   onSubmit={onSearchSubmit}
-                  className="tw-w-full lg:tw-flex-1 xl:tw-min-w-[250px] tw-relative">
+                  className="tw-w-full tw-relative">
                   <div className="tw-w-full tw-relative">
                     <svg
                       className="tw-pointer-events-none tw-absolute tw-left-3 tw-top-3.5 tw-h-4 tw-w-4 tw-text-iron-500"
@@ -345,7 +340,7 @@ export default function UserPageRepNewRepSearch({
                     )}
                   </AnimatePresence>
                 </form>
-                <div className="tw-relative tw-flex tw-w-full lg:tw-w-32 xl:tw-w-36">
+                <div className="tw-relative tw-flex tw-w-full">
                   <UserPageRateInput
                     value={amountStr}
                     onChange={setAmountStr}
diff --git a/components/user/rep/reps/UserPageRepReps.tsx b/components/user/rep/reps/UserPageRepReps.tsx
deleted file mode 100644
index 390d7246d0..0000000000
--- a/components/user/rep/reps/UserPageRepReps.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-"use client";
-
-import { useContext, useEffect, useState } from "react";
-import type { ApiProfileRepRatesState, RatingStats } from "@/entities/IProfile";
-import UserPageRepRepsTable from "./table/UserPageRepRepsTable";
-import { AuthContext } from "@/components/auth/Auth";
-import { ApiProfileProxyActionType } from "@/generated/models/ApiProfileProxyActionType";
-import type { ApiIdentity } from "@/generated/models/ApiIdentity";
-import UserPageRateWrapper from "../../utils/rate/UserPageRateWrapper";
-import UserPageRepNewRep from "../new-rep/UserPageRepNewRep";
-import { RateMatter } from "@/types/enums";
-
-export default function UserPageRepReps({
-  repRates,
-  profile,
-}: {
-  readonly repRates: ApiProfileRepRatesState | null;
-  readonly profile: ApiIdentity;
-}) {
-  const { connectedProfile, activeProfileProxy } = useContext(AuthContext);
-
-  const sortReps = (items: RatingStats[]) =>
-    [...items].sort((a, d) => {
-      if (a.rating === d.rating) {
-        return d.contributor_count - a.contributor_count;
-      }
-      return d.rating - a.rating;
-    });
-
-  const [reps, setReps] = useState<RatingStats[]>(
-    sortReps(repRates?.rating_stats ?? [])
-  );
-
-  useEffect(
-    () => setReps(sortReps(repRates?.rating_stats ?? [])),
-    [repRates?.rating_stats]
-  );
-
-  const getCanEditRep = ({
-    myProfile,
-    targetProfile,
-  }: {
-    myProfile: ApiIdentity | null;
-    targetProfile: ApiIdentity;
-  }) => {
-    if (!myProfile?.handle) {
-      return false;
-    }
-    if (activeProfileProxy) {
-      if (profile.handle === activeProfileProxy.created_by.handle) {
-        return false;
-      }
-      return activeProfileProxy.actions.some(
-        (action) => action.action_type === ApiProfileProxyActionType.AllocateRep
-      );
-    }
-    if (myProfile.handle === targetProfile.handle) {
-      return false;
-    }
-    return true;
-  };
-
-  const [canEditRep, setCanEditRep] = useState<boolean>(
-    getCanEditRep({
-      myProfile: connectedProfile,
-      targetProfile: profile,
-    })
-  );
-
-  useEffect(() => {
-    setCanEditRep(
-      getCanEditRep({
-        myProfile: connectedProfile,
-        targetProfile: profile,
-      })
-    );
-  }, [connectedProfile, profile]);
-
-  return (
-    <div className="tw-mt-6 lg:tw-mt-8">
-      <div className="tw-relative">
-        <div className="tw-mb-4">
-          <h3 className="tw-mb-0 tw-text-xl tw-font-semibold tw-text-iron-100">
-            Total Rep
-          </h3>
-        </div>
-
-        <UserPageRateWrapper
-          profile={profile}
-          type={RateMatter.REP}
-          hideOwnProfileMessage>
-          <UserPageRepNewRep profile={profile} repRates={repRates} />
-        </UserPageRateWrapper>
-
-        {!!reps.length && (
-          <div className="tw-mt-2">
-            <UserPageRepRepsTable
-              reps={reps}
-              profile={profile}
-              canEditRep={canEditRep}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/components/user/rep/reps/table/UserPageRepRepsTable.tsx b/components/user/rep/reps/table/UserPageRepRepsTable.tsx
deleted file mode 100644
index 83dbcbd761..0000000000
--- a/components/user/rep/reps/table/UserPageRepRepsTable.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import type { RatingStats } from "@/entities/IProfile";
-import UserPageRepRepsTableBody from "./UserPageRepRepsTableBody";
-import UserPageRepRepsTableHeader from "./UserPageRepRepsTableHeader";
-import { SortDirection } from "@/entities/ISort";
-import { assertUnreachable } from "@/helpers/AllowlistToolHelpers";
-import type { ApiIdentity } from "@/generated/models/ApiIdentity";
-export enum RepsTableSort {
-  REP = "REP",
-  RATERS = "RATERS",
-  MY_RATES = "MY_RATES",
-}
-
-const DEFAULT_INITIAL_COUNT = 10;
-
-export default function UserPageRepRepsTable({
-  reps,
-  profile,
-  canEditRep,
-  initialCount = DEFAULT_INITIAL_COUNT,
-}: {
-  readonly reps: RatingStats[];
-  readonly profile: ApiIdentity;
-  readonly canEditRep: boolean;
-  readonly initialCount?: number;
-}) {
-  const [showAll, setShowAll] = useState(false);
-  const [sortType, setSortType] = useState<RepsTableSort>(RepsTableSort.REP);
-  const [sortDirection, setSortDirection] = useState<SortDirection>(
-    SortDirection.DESC
-  );
-
-  const onSortTypeClick = (newSortType: RepsTableSort) => {
-    if (newSortType === sortType) {
-      setSortDirection((prev) =>
-        prev === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC
-      );
-    } else {
-      setSortType(newSortType);
-      setSortDirection(SortDirection.DESC);
-    }
-  };
-
-  const compareValuesForSort = (
-    a: number,
-    d: number,
-    dir: SortDirection,
-    zeroAtEnd: boolean = false
-  ) => {
-    if (!zeroAtEnd) {
-      return dir === SortDirection.DESC ? d - a : a - d;
-    }
-
-    if (a === 0 && d === 0) {
-      return 0;
-    } else if (a === 0) {
-      return 1;
-    } else if (d === 0) {
-      return -1;
-    }
-    return dir === SortDirection.DESC ? d - a : a - d;
-  };
-
-  const sortReps = (
-    items: RatingStats[],
-    sort: RepsTableSort,
-    dir: SortDirection
-  ): RatingStats[] => {
-    switch (sort) {
-      case RepsTableSort.REP:
-        return items.sort((a, d) =>
-          compareValuesForSort(a.rating, d.rating, dir)
-        );
-      case RepsTableSort.RATERS:
-        return items.sort((a, d) =>
-          compareValuesForSort(a.contributor_count, d.contributor_count, dir)
-        );
-      case RepsTableSort.MY_RATES:
-        return items.sort((a, d) =>
-          compareValuesForSort(
-            a.rater_contribution,
-            d.rater_contribution,
-            dir,
-            true
-          )
-        );
-      default:
-        assertUnreachable(sort);
-        return items;
-    }
-  };
-
-  const [sortedReps, setSortedReps] = useState<RatingStats[]>(
-    sortReps(reps, sortType, sortDirection)
-  );
-
-  useEffect(() => {
-    setSortedReps(sortReps(reps, sortType, sortDirection));
-  }, [reps, sortType, sortDirection]);
-
-  useEffect(() => {
-    if (!canEditRep && sortType === RepsTableSort.MY_RATES) {
-      setSortType(RepsTableSort.REP);
-      setSortDirection(SortDirection.DESC);
-    }
-  }, [canEditRep, sortType]);
-
-  const displayedReps = showAll
-    ? sortedReps
-    : sortedReps.slice(0, initialCount);
-  const hasMore = sortedReps.length > initialCount;
-  const maxRep = Math.max(...reps.map((r) => Math.abs(r.rating)), 0);
-
-  return (
-    <div className="tw-flow-root">
-      <div className="tw-overflow-x-auto tw-scrollbar-thin tw-scrollbar-thumb-iron-500 tw-scrollbar-track-iron-800 desktop-hover:hover:tw-scrollbar-thumb-iron-300">
-        <table
-          className="tw-min-w-full tw-border-separate"
-          style={{ borderSpacing: "0 0.25rem" }}
-        >
-          <UserPageRepRepsTableHeader
-            activeType={sortType}
-            sortDirection={sortDirection}
-            showMyRates={canEditRep}
-            onSortTypeClick={onSortTypeClick}
-          />
-
-          <UserPageRepRepsTableBody
-            reps={displayedReps}
-            profile={profile}
-            canEditRep={canEditRep}
-            maxRep={maxRep}
-          />
-        </table>
-      </div>
-      {hasMore && (
-        <button
-          type="button"
-          onClick={() => setShowAll((prev) => !prev)}
-          className="tw-w-full tw-mt-2 tw-py-2.5 tw-text-xs tw-font-medium tw-text-iron-400 tw-bg-transparent tw-border tw-border-solid tw-border-white/[0.14] tw-rounded-lg tw-cursor-pointer tw-transition tw-duration-300 tw-ease-out desktop-hover:hover:tw-text-iron-200 desktop-hover:hover:tw-border-white/[0.2]"
-        >
-          {showAll ? "Show less" : `See all ${sortedReps.length}`}
-        </button>
-      )}
-    </div>
-  );
-}
diff --git a/components/user/rep/reps/table/UserPageRepRepsTableBody.tsx b/components/user/rep/reps/table/UserPageRepRepsTableBody.tsx
deleted file mode 100644
index 6c1a0d9a80..0000000000
--- a/components/user/rep/reps/table/UserPageRepRepsTableBody.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { RatingStats } from "@/entities/IProfile";
-import UserPageRepRepsTableItem from "./UserPageRepRepsTableItem";
-import type { ApiIdentity } from "@/generated/models/ApiIdentity";
-
-export default function UserPageRepRepsTableBody({
-  reps,
-  profile,
-  canEditRep,
-  maxRep,
-}: {
-  readonly reps: RatingStats[];
-  readonly profile: ApiIdentity;
-  readonly canEditRep: boolean;
-  readonly maxRep: number;
-}) {
-  return (
-    <tbody>
-      {reps.map((rep) => (
-        <UserPageRepRepsTableItem
-          key={rep.category}
-          rep={rep}
-          profile={profile}
-          canEditRep={canEditRep}
-          maxRep={maxRep}
-        />
-      ))}
-    </tbody>
-  );
-}
diff --git a/components/user/rep/reps/table/UserPageRepRepsTableHeader.tsx b/components/user/rep/reps/table/UserPageRepRepsTableHeader.tsx
deleted file mode 100644
index 8061e091a0..0000000000
--- a/components/user/rep/reps/table/UserPageRepRepsTableHeader.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-"use client";
-
-import type { SortDirection } from "@/entities/ISort";
-import { useEffect, useState } from "react";
-import { RepsTableSort } from "./UserPageRepRepsTable";
-import UserPageRepRepsTableHeaderSortableCell from "./UserPageRepRepsTableHeaderSortableCell";
-
-export default function UserPageRepRepsTableHeader({
-  activeType,
-  sortDirection,
-  showMyRates,
-  onSortTypeClick,
-}: {
-  readonly activeType: RepsTableSort;
-  readonly sortDirection: SortDirection;
-  readonly showMyRates: boolean;
-  readonly onSortTypeClick: (newSortType: RepsTableSort) => void;
-}) {
-  const getTypes = (myRates: boolean) => {
-    if (myRates) {
-      return [RepsTableSort.REP, RepsTableSort.RATERS, RepsTableSort.MY_RATES];
-    }
-    return [RepsTableSort.REP, RepsTableSort.RATERS];
-  };
-
-  const [types, setTypes] = useState<RepsTableSort[]>(getTypes(showMyRates));
-  useEffect(() => setTypes(getTypes(showMyRates)), [showMyRates]);
-
-  return (
-    <thead>
-      <tr className="tw-border-y tw-border-solid tw-border-white/[0.06] tw-border-x-0">
-        <th
-          scope="col"
-          className="tw-whitespace-nowrap tw-px-4 tw-py-1.5 tw-text-left tw-text-xs tw-font-semibold tw-uppercase tw-tracking-wider tw-text-iron-500 tw-border-0">
-          Category
-        </th>
-        {types.map((sortType) => (
-          <UserPageRepRepsTableHeaderSortableCell
-            key={sortType}
-            type={sortType}
-            activeType={activeType}
-            activeDirection={sortDirection}
-            onSortTypeClick={onSortTypeClick}
-          />
-        ))}
-      </tr>
-    </thead>
-  );
-}
diff --git a/components/user/rep/reps/table/UserPageRepRepsTableHeaderSortableCell.tsx b/components/user/rep/reps/table/UserPageRepRepsTableHeaderSortableCell.tsx
deleted file mode 100644
index 0fc47ce288..0000000000
--- a/components/user/rep/reps/table/UserPageRepRepsTableHeaderSortableCell.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-"use client";
-
-import CommonTableSortIcon from "@/components/user/utils/icons/CommonTableSortIcon";
-import { SortDirection } from "@/entities/ISort";
-import { useEffect, useState } from "react";
-import { RepsTableSort } from "./UserPageRepRepsTable";
-
-export default function UserPageRepRepsTableHeaderSortableCell({
-  type,
-  activeType,
-  activeDirection,
-  onSortTypeClick,
-}: {
-  readonly type: RepsTableSort;
-  readonly activeType: RepsTableSort;
-  readonly activeDirection: SortDirection;
-  readonly onSortTypeClick: (newSortType: RepsTableSort) => void;
-}) {
-  const SORT_TYPE_TO_TEXT: Record<RepsTableSort, string> = {
-    [RepsTableSort.REP]: "Rep",
-    [RepsTableSort.RATERS]: "Raters",
-    [RepsTableSort.MY_RATES]: "My Rates",
-  };
-
-  const [isActive, setIsActive] = useState<boolean>(type === activeType);
-  useEffect(() => {
-    setIsActive(type === activeType);
-  }, [activeType]);
-
-  const [sor, setSor] = useState<SortDirection>(
-    isActive ? activeDirection : SortDirection.DESC
-  );
-  useEffect(() => {
-    setSor(isActive ? activeDirection : SortDirection.DESC);
-  }, [activeDirection, isActive]);
-
-  return (
-    <th
-      scope="col"
-      className="tw-px-4 sm:tw-px-6 tw-whitespace-nowrap tw-group tw-cursor-pointer tw-py-1.5 tw-text-right tw-text-xs tw-font-semibold tw-uppercase tw-tracking-wider tw-text-iron-500 tw-border-0"
-      onClick={() => onSortTypeClick(type)}>
-      <span
-        className={`${
-          isActive ? "tw-text-iron-500" : "group-hover:tw-text-iron-400"
-        } tw-transition tw-duration-300 tw-ease-out`}>
-        {SORT_TYPE_TO_TEXT[type]}
-      </span>
-      {/* Sort icons intentionally hidden for this iteration. */}
-      <span className="-tw-mt-0.5 tw-ml-2 tw-hidden">
-        <CommonTableSortIcon direction={sor} isActive={isActive} />
-      </span>
-    </th>
-  );
-}
diff --git a/components/user/rep/reps/table/UserPageRepRepsTableItem.tsx b/components/user/rep/reps/table/UserPageRepRepsTableItem.tsx
deleted file mode 100644
index 0325157b6f..0000000000
--- a/components/user/rep/reps/table/UserPageRepRepsTableItem.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import type { RatingStats } from "@/entities/IProfile";
-import UserPageRepModifyModal from "@/components/user/rep/modify-rep/UserPageRepModifyModal";
-import { formatNumberWithCommas } from "@/helpers/Helpers";
-import type { ApiIdentity } from "@/generated/models/ApiIdentity";
-
-export default function UserPageRepRepsTableItem({
-  rep,
-  profile,
-  canEditRep,
-  maxRep,
-}: {
-  readonly rep: RatingStats;
-  readonly profile: ApiIdentity;
-  readonly canEditRep: boolean;
-  readonly maxRep: number;
-}) {
-  const [isEditRepModalOpen, setIsEditRepModalOpen] = useState<boolean>(false);
-
-  const onTableClick = () => {
-    if (canEditRep) {
-      setIsEditRepModalOpen(true);
-    }
-  };
-
-  const progressPercent =
-    maxRep > 0 ? (Math.abs(rep.rating) / maxRep) * 100 : 0;
-
-  const cellBase =
-    "tw-py-2.5 sm:tw-py-3 tw-px-4 tw-bg-gradient-to-r tw-from-[#0f1014]/40 tw-to-[#0A0A0C]/40 tw-border-y tw-border-solid tw-border-white/[0.08] sm:tw-border-white/[0.04] tw-border-x-0 tw-transition-all tw-duration-200 tw-ease-out";
-  const hoverClass = canEditRep
-    ? "group-hover:tw-from-[#12141a]/60 group-hover:tw-to-[#0d0f13]/60 group-hover:tw-border-white/[0.16]"
-    : "";
-
-  return (
-    <>
-      <tr
-        className={
-          canEditRep ? "tw-cursor-pointer tw-group" : "tw-group"
-        }
-        onClick={onTableClick}
-      >
-        {/* Category + progress bar */}
-        <td
-          className={`${cellBase} ${hoverClass} tw-rounded-l-lg tw-border-l tw-border-l-white/[0.08] sm:tw-border-l-white/[0.04]`}
-        >
-          <div className="tw-max-w-[12rem] lg:tw-max-w-[20rem] tw-truncate tw-text-sm lg:tw-text-base tw-font-semibold tw-text-iron-100 group-hover:tw-text-white tw-transition-colors tw-mb-2">
-            {rep.category}
-          </div>
-          <div className="tw-h-1 tw-w-full tw-max-w-[16rem] tw-bg-white/[0.04] tw-rounded-full tw-overflow-hidden">
-            <div
-              className="tw-h-full tw-bg-gradient-to-r tw-from-blue-500/50 tw-to-blue-400/30 tw-rounded-full tw-shadow-[0_0_6px_rgba(59,130,246,0.25)]"
-              style={{ width: `${progressPercent}%` }}
-            />
-          </div>
-        </td>
-
-        {/* Community (Rep) */}
-        <td className={`${cellBase} ${hoverClass} tw-text-right`}>
-          <span className="tw-text-sm lg:tw-text-base tw-font-semibold tw-text-iron-300 group-hover:tw-text-iron-200 tw-transition-colors">
-            {formatNumberWithCommas(rep.rating)}
-          </span>
-        </td>
-
-        {/* People (Raters) */}
-        <td
-          className={`${cellBase} ${hoverClass} tw-text-right ${
-            canEditRep ? "" : "tw-rounded-r-lg tw-border-r tw-border-r-white/[0.08] sm:tw-border-r-white/[0.04]"
-          }`}
-        >
-          <span className="tw-text-xs lg:tw-text-sm tw-font-normal tw-text-iron-400 group-hover:tw-text-iron-300 tw-transition-colors">
-            {formatNumberWithCommas(rep.contributor_count)}
-          </span>
-        </td>
-
-        {/* From You (My Rates) */}
-        {canEditRep && (
-          <td
-            className={`${cellBase} ${hoverClass} tw-rounded-r-lg tw-border-r tw-border-r-white/[0.08] sm:tw-border-r-white/[0.04] tw-text-right`}
-          >
-            {rep.rater_contribution ? (
-              <span
-                className={`tw-text-sm tw-font-semibold tw-transition-colors ${
-                  rep.rater_contribution > 0
-                    ? "tw-text-primary-400/90 group-hover:tw-text-primary-400"
-                    : "tw-text-rose-400"
-                }`}
-              >
-                {formatNumberWithCommas(rep.rater_contribution)}
-              </span>
-            ) : (
-              <span className="tw-text-sm tw-font-semibold tw-text-white/15 group-hover:tw-text-white/25 tw-transition-colors">-</span>
-            )}
-          </td>
-        )}
-      </tr>
-
-      {canEditRep && isEditRepModalOpen && (
-        <UserPageRepModifyModal
-          profile={profile}
-          category={rep.category}
-          onClose={() => setIsEditRepModalOpen(false)}
-        />
-      )}
-    </>
-  );
-}