diff --git a/__tests__/components/user/brain/UserPageBrainWrapper.test.tsx b/__tests__/components/user/brain/UserPageBrainWrapper.test.tsx
index caccd48396..31c9c43d0c 100644
--- a/__tests__/components/user/brain/UserPageBrainWrapper.test.tsx
+++ b/__tests__/components/user/brain/UserPageBrainWrapper.test.tsx
@@ -52,7 +52,7 @@ describe("UserPageBrainWrapper", () => {
       },
       identity: { id: "1" },
     });
-    expect(routerPush).toHaveBeenCalledWith("/alice/rep");
+    expect(routerPush).toHaveBeenCalledWith("/alice/identity");
   });
 
   it("shows drops when waves enabled", () => {
diff --git a/__tests__/components/user/identity/UserPageIdentity.test.tsx b/__tests__/components/user/identity/UserPageIdentity.test.tsx
deleted file mode 100644
index 78ba1c3c6d..0000000000
--- a/__tests__/components/user/identity/UserPageIdentity.test.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-import UserPageIdentity from '@/components/user/identity/UserPageIdentity';
-
-let headerProps: any;
-let statementsProps: any;
-let tableParams: any[] = [];
-let activityProps: any;
-
-jest.mock('@/components/user/identity/header/UserPageIdentityHeader', () => (props: any) => { headerProps = props; return <div data-testid="header" />; });
-jest.mock('@/components/user/identity/statements/UserPageIdentityStatements', () => (props: any) => { statementsProps = props; return <div data-testid="statements" />; });
-jest.mock('@/components/user/utils/raters-table/wrapper/ProfileRatersTableWrapper', () => (props: any) => { tableParams.push(props.initialParams); return <div data-testid="table" />; });
-jest.mock('@/components/user/identity/activity/UserPageIdentityActivityLog', () => (props: any) => { activityProps = props; return <div data-testid="activity" />; });
-
-describe('UserPageIdentity', () => {
-  beforeEach(() => { headerProps = undefined; statementsProps = undefined; tableParams = []; activityProps = undefined; });
-  it('passes props to children', () => {
-    const profile = { id: '1' } as any;
-    const params = { p: 1 } as any;
-    render(
-      <UserPageIdentity
-        profile={profile}
-        initialCICReceivedParams={params}
-        initialCICGivenParams={params}
-        initialActivityLogParams={params}
-      />
-    );
-    expect(headerProps.profile).toBe(profile);
-    expect(statementsProps.profile).toBe(profile);
-    expect(tableParams).toEqual([params, params]);
-    expect(activityProps.initialActivityLogParams).toBe(params);
-  });
-});
diff --git a/__tests__/components/user/identity/UserPageIdentityWrapper.test.tsx b/__tests__/components/user/identity/UserPageIdentityWrapper.test.tsx
deleted file mode 100644
index b4a6e27141..0000000000
--- a/__tests__/components/user/identity/UserPageIdentityWrapper.test.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import UserPageIdentityWrapper from "@/components/user/identity/UserPageIdentityWrapper";
-import { useIdentity } from "@/hooks/useIdentity";
-import { render } from "@testing-library/react";
-import { useParams, useRouter } from "next/navigation";
-
-jest.mock("next/navigation", () => ({
-  useRouter: jest.fn(),
-  useParams: jest.fn(),
-}));
-jest.mock("@/hooks/useIdentity", () => ({ useIdentity: jest.fn() }));
-
-let wrapperProfile: any;
-let identityProps: any;
-
-jest.mock(
-  "@/components/user/utils/set-up-profile/UserPageSetUpProfileWrapper",
-  () => (props: any) => {
-    wrapperProfile = props.profile;
-    return <div data-testid="wrapper">{props.children}</div>;
-  }
-);
-jest.mock("@/components/user/identity/UserPageIdentity", () => (props: any) => {
-  identityProps = props;
-  return <div data-testid="identity" />;
-});
-
-describe("UserPageIdentityWrapper", () => {
-  const routerMock = useRouter as jest.Mock;
-  const useIdentityMock = useIdentity as jest.Mock;
-  const useParamsMock = useParams as jest.Mock;
-  beforeEach(() => {
-    wrapperProfile = null;
-    identityProps = null;
-  });
-
-  it("uses profile from hook when available", () => {
-    useParamsMock.mockReturnValue({ user: "alice" });
-    const profile: any = { handle: "alice" };
-    useIdentityMock.mockReturnValue({ profile });
-    render(
-      <UserPageIdentityWrapper
-        profile={profile}
-        initialCICReceivedParams={{} as any}
-        initialCICGivenParams={{} as any}
-        initialActivityLogParams={{} as any}
-      />
-    );
-    expect(useIdentityMock).toHaveBeenCalledWith({
-      handleOrWallet: "alice",
-      initialProfile: profile,
-    });
-    expect(wrapperProfile).toBe(profile);
-    expect(identityProps.profile).toBe(profile);
-  });
-
-  it("falls back to initial profile when hook returns null", () => {
-    routerMock.mockReturnValue({ query: { user: "bob" } });
-    const profile: any = { handle: "bob" };
-    useIdentityMock.mockReturnValue({ profile: null });
-    render(
-      <UserPageIdentityWrapper
-        profile={profile}
-        initialCICReceivedParams={{} as any}
-        initialCICGivenParams={{} as any}
-        initialActivityLogParams={{} as any}
-      />
-    );
-    expect(wrapperProfile).toBe(profile);
-    expect(identityProps.profile).toBe(profile);
-  });
-});
diff --git a/__tests__/components/user/identity/activity/UserPageIdentityActivityLog.test.tsx b/__tests__/components/user/identity/activity/UserPageIdentityActivityLog.test.tsx
deleted file mode 100644
index fea8d18c7d..0000000000
--- a/__tests__/components/user/identity/activity/UserPageIdentityActivityLog.test.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import UserPageIdentityActivityLog from '@/components/user/identity/activity/UserPageIdentityActivityLog';
-
-jest.mock('@/components/profile-activity/ProfileActivityLogs', () => (props: any) => (
-  <div data-testid="activity" data-props={JSON.stringify(props)} />
-));
-
-jest.mock('@/components/profile-activity/ProfileName', () => ({
-  __esModule: true,
-  ProfileNameType: { POSSESSION: 'POSSESSION', DEFAULT: 'DEFAULT' },
-  default: (props: any) => <span data-testid="name">{props.type}</span>,
-}));
-
-jest.mock('@/components/user/utils/UserTableHeaderWrapper', () => (props: any) => (
-  <div data-testid="wrapper">{props.children}</div>
-));
-
-describe('UserPageIdentityActivityLog', () => {
-  it('passes initial params to activity logs', () => {
-    const params = { limit: 5 } as any;
-    render(<UserPageIdentityActivityLog initialActivityLogParams={params} />);
-    const activity = screen.getByTestId('activity');
-    const props = JSON.parse(activity.getAttribute('data-props') || '{}');
-    expect(props.initialParams).toEqual(params);
-    expect(props.withFilters).toBe(true);
-    expect(screen.getByText('NIC Activity Log')).toBeInTheDocument();
-  });
-});
diff --git a/__tests__/components/user/identity/header/UserPageIdentityHeaderCIC.test.tsx b/__tests__/components/user/identity/header/UserPageIdentityHeaderCIC.test.tsx
index edf88198ac..1d50ad37da 100644
--- a/__tests__/components/user/identity/header/UserPageIdentityHeaderCIC.test.tsx
+++ b/__tests__/components/user/identity/header/UserPageIdentityHeaderCIC.test.tsx
@@ -2,30 +2,41 @@ import { render, screen } from '@testing-library/react';
 import UserPageIdentityHeaderCIC from '@/components/user/identity/header/UserPageIdentityHeaderCIC';
 import type { ApiIdentity } from '@/generated/models/ApiIdentity';
 
+jest.mock('@tanstack/react-query', () => ({
+  useQuery: jest.fn(() => ({ data: { count: 2 } })),
+}));
+
 jest.mock('@/components/user/utils/user-cic-type/UserCICTypeIconWrapper', () => ({
   __esModule: true,
   default: () => <div data-testid="icon" />,
 }));
 
+jest.mock('@/components/user/rep/header/TopRaterAvatars', () => ({
+  __esModule: true,
+  default: () => <div data-testid="raters-avatars" />,
+}));
+
 jest.mock('@/components/user/utils/user-cic-status/UserCICStatus', () => ({
   __esModule: true,
   default: ({ cic }: { cic: number }) => <div data-testid="status">{cic}</div>,
 }));
 
 describe('UserPageIdentityHeaderCIC', () => {
-  const baseProfile: ApiIdentity = { cic: 1000 } as ApiIdentity;
+  const baseProfile: ApiIdentity = { cic: 1000, handle: 'alice' } as ApiIdentity;
 
   it('displays NIC and status info', () => {
     render(<UserPageIdentityHeaderCIC profile={baseProfile} />);
-    expect(screen.getByText('NIC:')).toBeInTheDocument();
+    expect(screen.getByText('NIC')).toBeInTheDocument();
     expect(screen.getByText('1,000')).toBeInTheDocument();
+    expect(screen.getByTestId('raters-avatars')).toBeInTheDocument();
+    expect(screen.getByText('2 raters')).toBeInTheDocument();
     expect(screen.getByTestId('icon')).toBeInTheDocument();
     expect(screen.getByTestId('status')).toHaveTextContent('1000');
   });
 
   it('updates when profile prop changes', () => {
     const { rerender } = render(<UserPageIdentityHeaderCIC profile={baseProfile} />);
-    rerender(<UserPageIdentityHeaderCIC profile={{ cic: 2000 } as ApiIdentity} />);
+    rerender(<UserPageIdentityHeaderCIC profile={{ cic: 2000, handle: 'alice' } as ApiIdentity} />);
     expect(screen.getByText('2,000')).toBeInTheDocument();
     expect(screen.getByTestId('status')).toHaveTextContent('2000');
   });
diff --git a/__tests__/components/user/layout/UserPageTabs.test.tsx b/__tests__/components/user/layout/UserPageTabs.test.tsx
index 66aa4cf7c1..215060112c 100644
--- a/__tests__/components/user/layout/UserPageTabs.test.tsx
+++ b/__tests__/components/user/layout/UserPageTabs.test.tsx
@@ -38,7 +38,7 @@ const renderTabs = (
   country: string = "US"
 ) => {
   (useRouter as jest.Mock).mockReturnValue({ push: jest.fn() });
-  (usePathname as jest.Mock).mockReturnValue("/[user]/rep");
+  (usePathname as jest.Mock).mockReturnValue("/[user]/identity");
   (useSearchParams as jest.Mock).mockReturnValue(new URLSearchParams());
   (useParams as jest.Mock).mockReturnValue({ user: "testuser" });
   capacitorMock.mockReturnValue({ isIos });
diff --git a/__tests__/components/user/rep/UserPageRepActivityLog.test.tsx b/__tests__/components/user/rep/UserPageRepActivityLog.test.tsx
deleted file mode 100644
index 068f67795b..0000000000
--- a/__tests__/components/user/rep/UserPageRepActivityLog.test.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import UserPageRepActivityLog from '@/components/user/rep/UserPageRepActivityLog';
-
-jest.mock('@/components/profile-activity/ProfileActivityLogs', () => (props: any) => (
-  <div data-testid="logs">{JSON.stringify(props.initialParams)}</div>
-));
-jest.mock('@/components/profile-activity/ProfileName', () => ({
-  __esModule: true,
-  default: () => <span>ProfileName</span>,
-  ProfileNameType: { POSSESSION: 'POSSESSION' }
-}));
-
-const params = { page: 1 } as any;
-
-describe('UserPageRepActivityLog', () => {
-  it('renders activity log component', () => {
-    render(<UserPageRepActivityLog initialActivityLogParams={params} />);
-    expect(screen.getByText('Rep Activity Log')).toBeInTheDocument();
-    expect(screen.getByTestId('logs')).toHaveTextContent('page');
-  });
-});
diff --git a/__tests__/components/user/rep/header/UserPageRepHeader.test.tsx b/__tests__/components/user/rep/header/UserPageRepHeader.test.tsx
index b210ae3927..9400b97d1c 100644
--- a/__tests__/components/user/rep/header/UserPageRepHeader.test.tsx
+++ b/__tests__/components/user/rep/header/UserPageRepHeader.test.tsx
@@ -1,19 +1,25 @@
 import { render, screen } from '@testing-library/react';
 import UserPageRepHeader from '@/components/user/rep/header/UserPageRepHeader';
 
+const mockProfile = {
+  handle: 'testuser',
+  display: 'Test User',
+  query: 'testuser',
+} as any;
+
 describe('UserPageRepHeader', () => {
   it('shows rep totals when provided', () => {
     const repRates = {
       total_rep_rating: 1500,
       number_of_raters: 25,
+      rating_stats: [],
     } as any;
-    render(<UserPageRepHeader repRates={repRates} />);
+    render(<UserPageRepHeader repRates={repRates} profile={mockProfile} />);
     expect(screen.getByText('1,500')).toBeInTheDocument();
-    expect(screen.getByText('25')).toBeInTheDocument();
   });
 
-  it('renders empty values without repRates', () => {
-    const { container } = render(<UserPageRepHeader repRates={null} />);
-    expect(container).toHaveTextContent('Rep:');
+  it('renders without repRates', () => {
+    const { container } = render(<UserPageRepHeader repRates={null} profile={mockProfile} />);
+    expect(container).toHaveTextContent('Reputation');
   });
 });
diff --git a/__tests__/components/user/rep/new-rep/UserPageRepNewRep.test.tsx b/__tests__/components/user/rep/new-rep/UserPageRepNewRep.test.tsx
index 0551249d07..78e36e441d 100644
--- a/__tests__/components/user/rep/new-rep/UserPageRepNewRep.test.tsx
+++ b/__tests__/components/user/rep/new-rep/UserPageRepNewRep.test.tsx
@@ -1,13 +1,10 @@
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import UserPageRepNewRep from '@/components/user/rep/new-rep/UserPageRepNewRep';
 import type { ApiIdentity } from '@/generated/models/ApiIdentity';
 
 jest.mock('@/components/user/rep/new-rep/UserPageRepNewRepSearch', () => ({
   __esModule: true,
-  default: ({ onRepSearch }: { onRepSearch: (v: string) => void }) => (
-    <button onClick={() => onRepSearch('Art')}>search</button>
-  ),
+  default: () => <div data-testid="search" />,
 }));
 
 jest.mock('@/components/user/rep/modify-rep/UserPageRepModifyModal', () => ({
@@ -19,9 +16,8 @@ describe('UserPageRepNewRep', () => {
   const profile = { id: '1' } as ApiIdentity;
   const repRates = { rating_stats: [] } as any;
 
-  it('opens modal when search selects rep', async () => {
+  it('renders search component', () => {
     render(<UserPageRepNewRep profile={profile} repRates={repRates} />);
-    await userEvent.click(screen.getByRole('button', { name: 'search' }));
-    expect(screen.getByTestId('modal')).toBeInTheDocument();
+    expect(screen.getByTestId('search')).toBeInTheDocument();
   });
 });
diff --git a/__tests__/components/user/rep/new-rep/UserPageRepNewRepSearch.test.tsx b/__tests__/components/user/rep/new-rep/UserPageRepNewRepSearch.test.tsx
index 066e2d2883..40695d9e88 100644
--- a/__tests__/components/user/rep/new-rep/UserPageRepNewRepSearch.test.tsx
+++ b/__tests__/components/user/rep/new-rep/UserPageRepNewRepSearch.test.tsx
@@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event";
 import UserPageRepNewRepSearch from "@/components/user/rep/new-rep/UserPageRepNewRepSearch";
 import { useQuery } from "@tanstack/react-query";
 
-jest.mock("@tanstack/react-query", () => ({ useQuery: jest.fn() }));
+jest.mock("@tanstack/react-query", () => ({ useQuery: jest.fn(), useMutation: jest.fn().mockReturnValue({ mutateAsync: jest.fn() }) }));
 
 jest.mock("@/components/user/rep/new-rep/UserPageRepNewRepSearchHeader", () => () => <div data-testid="header" />);
 jest.mock("@/components/user/rep/new-rep/UserPageRepNewRepSearchDropdown", () => (props: any) => (
@@ -15,14 +15,14 @@ jest.mock("@/components/user/rep/new-rep/UserPageRepNewRepSearchDropdown", () =>
 ));
 jest.mock("@/components/user/rep/new-rep/UserPageRepNewRepError", () => () => <div data-testid="error" />);
 jest.mock("@/components/distribution-plan-tool/common/CircleLoader", () => () => <div data-testid="loader" />);
-jest.mock("services/api/common-api", () => ({ commonApiFetch: jest.fn() }));
+jest.mock("services/api/common-api", () => ({ commonApiFetch: jest.fn(), commonApiPost: jest.fn() }));
 
 describe("UserPageRepNewRepSearch", () => {
   it("shows dropdown results and handles selection", async () => {
     (useQuery as jest.Mock).mockReturnValue({ isFetching: false, data: ["cat1"] });
     const user = userEvent.setup();
     render(
-      <UserPageRepNewRepSearch repRates={null} onRepSearch={jest.fn()} profile={{} as any} />
+      <UserPageRepNewRepSearch repRates={null} profile={{} as any} />
     );
     await user.type(screen.getByPlaceholderText(/Category to grant rep/), "art");
     await waitFor(() => screen.getByTestId("dropdown"));
diff --git a/__tests__/components/user/user-page-header/stats/UserPageHeaderStats.test.tsx b/__tests__/components/user/user-page-header/stats/UserPageHeaderStats.test.tsx
index ec69fbf2a5..fc96542ba9 100644
--- a/__tests__/components/user/user-page-header/stats/UserPageHeaderStats.test.tsx
+++ b/__tests__/components/user/user-page-header/stats/UserPageHeaderStats.test.tsx
@@ -28,7 +28,7 @@ describe('UserPageHeaderStats', () => {
       />
     );
     expect(screen.getByRole('link', { name: 'fmt-10 TDH' })).toHaveAttribute('href', '/bob/collected');
-    expect(screen.getByRole('link', { name: 'fmt-20 Rep' })).toHaveAttribute('href', '/bob/rep');
+    expect(screen.getByRole('link', { name: 'fmt-20 Rep' })).toHaveAttribute('href', '/bob/identity');
     expect(screen.getByRole('link', { name: 'fmt-3 TDH Rate' })).toHaveAttribute(
       'href',
       '/bob/stats?activity=tdh-history'
diff --git a/__tests__/components/user/utils/rate/UserPageRateWrapper.test.tsx b/__tests__/components/user/utils/rate/UserPageRateWrapper.test.tsx
index b71b61b0cd..3b50cc20d8 100644
--- a/__tests__/components/user/utils/rate/UserPageRateWrapper.test.tsx
+++ b/__tests__/components/user/utils/rate/UserPageRateWrapper.test.tsx
@@ -19,11 +19,19 @@ describe("UserPageRateWrapper", () => {
     wallets: [{ wallet: "0xabc" }],
   };
 
-  function renderWrapper(ctx: any, seize: any, type = RateMatter.NIC) {
+  function renderWrapper(
+    ctx: any,
+    seize: any,
+    type = RateMatter.NIC,
+    options?: { hideOwnProfileMessage?: boolean }
+  ) {
     useCtx.mockReturnValue(seize);
     return render(
       <AuthContext.Provider value={ctx as any}>
-        <UserPageRateWrapper profile={profile} type={type}>
+        <UserPageRateWrapper
+          profile={profile}
+          type={type}
+          hideOwnProfileMessage={options?.hideOwnProfileMessage}>
           <div data-testid="child" />
         </UserPageRateWrapper>
       </AuthContext.Provider>
@@ -47,4 +55,33 @@ describe("UserPageRateWrapper", () => {
     );
     expect(screen.getByTestId("child")).toBeInTheDocument();
   });
+
+  it.each([RateMatter.REP, RateMatter.NIC])(
+    "shows own-profile message by default (%s)",
+    (type) => {
+      renderWrapper(
+        { connectedProfile: { handle: "alice" }, activeProfileProxy: undefined },
+        { address: "0xabc" },
+        type
+      );
+      expect(screen.getByTestId("infobox")).toHaveTextContent(
+        "You can't"
+      );
+      expect(screen.queryByTestId("child")).not.toBeInTheDocument();
+    }
+  );
+
+  it.each([RateMatter.REP, RateMatter.NIC])(
+    "hides own-profile section when hideOwnProfileMessage is true (%s)",
+    (type) => {
+      renderWrapper(
+        { connectedProfile: { handle: "alice" }, activeProfileProxy: undefined },
+        { address: "0xabc" },
+        type,
+        { hideOwnProfileMessage: true }
+      );
+      expect(screen.queryByTestId("infobox")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("child")).not.toBeInTheDocument();
+    }
+  );
 });
diff --git a/__tests__/components/user/utils/raters-table/ProfileRatersTableBody.test.tsx b/__tests__/components/user/utils/raters-table/ProfileRatersTableBody.test.tsx
index e514fc088a..2e468a84ea 100644
--- a/__tests__/components/user/utils/raters-table/ProfileRatersTableBody.test.tsx
+++ b/__tests__/components/user/utils/raters-table/ProfileRatersTableBody.test.tsx
@@ -1,5 +1,4 @@
 import ProfileRatersTableBody from "@/components/user/utils/raters-table/ProfileRatersTableBody";
-import { ProfileRatersTableType } from "@/types/enums";
 import { render } from "@testing-library/react";
 
 let itemProps: any[] = [];
@@ -27,7 +26,6 @@ describe("ProfileRatersTableBody", () => {
       <table>
         <ProfileRatersTableBody
           ratings={ratings}
-          type={ProfileRatersTableType.CIC_RECEIVED}
         />
       </table>
     );
diff --git a/__tests__/components/user/utils/raters-table/ProfileRatersTableItem.test.tsx b/__tests__/components/user/utils/raters-table/ProfileRatersTableItem.test.tsx
index e2adbaa6d8..70e8bf0904 100644
--- a/__tests__/components/user/utils/raters-table/ProfileRatersTableItem.test.tsx
+++ b/__tests__/components/user/utils/raters-table/ProfileRatersTableItem.test.tsx
@@ -1,5 +1,4 @@
 import ProfileRatersTableItem from "@/components/user/utils/raters-table/ProfileRatersTableItem";
-import { ProfileRatersTableType } from "@/types/enums";
 import { render, screen } from "@testing-library/react";
 
 let cicProps: any;
@@ -23,13 +22,12 @@ describe("ProfileRatersTableItem", () => {
         <tbody>
           <ProfileRatersTableItem
             rating={baseRating}
-            type={ProfileRatersTableType.REP_RECEIVED}
           />
         </tbody>
       </table>
     );
     const link = screen.getByText("bob").closest("a")!;
-    expect(link).toHaveAttribute("href", "/bob/rep");
+    expect(link).toHaveAttribute("href", "/bob/identity");
     expect(screen.getByText("+5")).toBeInTheDocument();
     expect(cicProps.level).toBe(3);
   });
@@ -41,7 +39,6 @@ describe("ProfileRatersTableItem", () => {
         <tbody>
           <ProfileRatersTableItem
             rating={rating}
-            type={ProfileRatersTableType.CIC_GIVEN}
           />
         </tbody>
       </table>
diff --git a/__tests__/components/waves/groups/curation/WaveCurationGroupsSection.test.tsx b/__tests__/components/waves/groups/curation/WaveCurationGroupsSection.test.tsx
index 6cf34caebb..27f2bd8307 100644
--- a/__tests__/components/waves/groups/curation/WaveCurationGroupsSection.test.tsx
+++ b/__tests__/components/waves/groups/curation/WaveCurationGroupsSection.test.tsx
@@ -167,7 +167,6 @@ const renderSection = (wave = baseWave) =>
           onProfileStatementRemove: jest.fn(),
           onIdentityFollowChange: jest.fn(),
           initProfileRepPage: jest.fn(),
-          initProfileIdentityPage: jest.fn(),
           initCommunityActivityPage: jest.fn(),
           waitAndInvalidateDrops: jest.fn(),
           addOptimisticDrop: jest.fn(),
diff --git a/__tests__/pages/userPageIdentity.test.tsx b/__tests__/pages/userPageIdentity.test.tsx
deleted file mode 100644
index 7b4d15bae9..0000000000
--- a/__tests__/pages/userPageIdentity.test.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import React from "react";
-
-// Mocks for helpers used by the factory
-jest.mock("@/helpers/server.app.helpers", () => ({
-  getAppCommonHeaders: jest.fn(async () => ({ "x-test": "1" })),
-}));
-
-jest.mock("@/helpers/server.helpers", () => ({
-  getUserProfile: jest.fn(async ({ user }: { user: string }) => ({
-    handle: user,
-    walletAddress: "0xabc",
-    tdh: 0,
-    rep: 0,
-    level: 0,
-  })),
-  userPageNeedsRedirect: jest.fn(() => null),
-}));
-
-jest.mock("@/components/providers/metadata", () => ({
-  getAppMetadata: jest.fn((v: any) => v),
-}));
-
-// Use real helpers but we'll spy on the metadata builder
-import * as Helpers from "@/helpers/Helpers";
-
-// Mock layout to avoid React Query provider requirements
-jest.mock("@/components/user/layout/UserPageLayout", () => ({
-  __esModule: true,
-  default: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="layout">{children}</div>
-  ),
-}));
-
-// Mock redirect from next/navigation so we can assert it
-const redirectMock = jest.fn();
-jest.mock("next/navigation", () => ({
-  redirect: (url: string) => redirectMock(url),
-}));
-
-// Import after mocks
-import { createUserTabPage } from "@/app/[user]/_lib/userTabPageFactory";
-import { getAppMetadata } from "@/components/providers/metadata";
-import {
-  getUserProfile,
-  userPageNeedsRedirect,
-} from "@/helpers/server.helpers";
-
-// Dummy Identity tab
-function DummyIdentityTab({ profile }: { readonly profile: any }) {
-  return <div data-testid="identity">IDENTITY:{profile.handle}</div>;
-}
-
-const buildFactory = () =>
-  createUserTabPage({
-    subroute: "identity",
-    metaLabel: "Identity",
-    Tab: DummyIdentityTab,
-  });
-
-describe("identity page via createUserTabPage", () => {
-  beforeEach(() => {
-    redirectMock.mockClear();
-    (userPageNeedsRedirect as jest.Mock).mockReturnValue(null);
-  });
-
-  it("renders layout + tab when no redirect needed", async () => {
-    const { Page } = buildFactory();
-
-    const element = await Page({
-      params: Promise.resolve({ user: "Alice" }),
-      searchParams: Promise.resolve({ foo: "bar" }),
-    } as any);
-
-    render(element);
-
-    expect(await screen.findByTestId("identity")).toHaveTextContent(
-      "IDENTITY:alice"
-    );
-
-    expect(getUserProfile).toHaveBeenCalledWith({
-      user: "alice",
-      headers: { "x-test": "1" },
-    });
-    expect(userPageNeedsRedirect).toHaveBeenCalledWith({
-      profile: expect.any(Object),
-      req: { query: { user: "Alice", foo: "bar" } },
-      subroute: "identity",
-    });
-    expect(redirectMock).not.toHaveBeenCalled();
-  });
-
-  it("redirects when userPageNeedsRedirect returns destination", async () => {
-    (userPageNeedsRedirect as jest.Mock).mockReturnValue({
-      redirect: { destination: "/bob/identity" },
-    });
-
-    const { Page } = buildFactory();
-
-    await Page({
-      params: Promise.resolve({ user: "Carol" }),
-      searchParams: Promise.resolve({}),
-    } as any);
-
-    expect(redirectMock).toHaveBeenCalledWith("/bob/identity");
-  });
-
-  it("generateMetadata uses helpers", async () => {
-    const { generateMetadata } = buildFactory();
-    const spy = jest.spyOn(Helpers, "getMetadataForUserPage");
-
-    const meta = await generateMetadata({
-      params: Promise.resolve({ user: "Dave" }),
-    } as any);
-
-    expect(spy).toHaveBeenCalledWith(
-      expect.objectContaining({ handle: "dave", walletAddress: "0xabc" }),
-      "Identity"
-    );
-    expect(getAppMetadata).toHaveBeenCalled();
-    expect(meta).toEqual(
-      expect.objectContaining({ title: expect.stringContaining("dave") })
-    );
-  });
-});
diff --git a/__tests__/pages/userPageRep.test.tsx b/__tests__/pages/userPageRep.test.tsx
index a166674f16..d9f31a6cd7 100644
--- a/__tests__/pages/userPageRep.test.tsx
+++ b/__tests__/pages/userPageRep.test.tsx
@@ -52,7 +52,7 @@ function DummyRepTab({ profile }: { readonly profile: any }) {
 }
 
 const buildFactory = () =>
-  createUserTabPage({ subroute: "rep", metaLabel: "Rep", Tab: DummyRepTab });
+  createUserTabPage({ subroute: "identity", metaLabel: "Identity", Tab: DummyRepTab });
 
 describe("rep page via createUserTabPage", () => {
   beforeEach(() => {
@@ -79,14 +79,14 @@ describe("rep page via createUserTabPage", () => {
     expect(userPageNeedsRedirect).toHaveBeenCalledWith({
       profile: expect.any(Object),
       req: { query: { user: "Alice", foo: "bar" } },
-      subroute: "rep",
+      subroute: "identity",
     });
     expect(redirectMock).not.toHaveBeenCalled();
   });
 
   it("redirects when userPageNeedsRedirect returns destination", async () => {
     (userPageNeedsRedirect as jest.Mock).mockReturnValue({
-      redirect: { destination: "/bob/rep" },
+      redirect: { destination: "/bob/identity" },
     });
 
     const { Page } = buildFactory();
@@ -96,7 +96,7 @@ describe("rep page via createUserTabPage", () => {
       searchParams: Promise.resolve({}),
     } as any);
 
-    expect(redirectMock).toHaveBeenCalledWith("/bob/rep");
+    expect(redirectMock).toHaveBeenCalledWith("/bob/identity");
   });
 
   it("generateMetadata uses helpers", async () => {
@@ -109,7 +109,7 @@ describe("rep page via createUserTabPage", () => {
 
     expect(spy).toHaveBeenCalledWith(
       expect.objectContaining({ handle: "dave", walletAddress: "0xabc" }),
-      "Rep"
+      "Identity"
     );
     expect(getAppMetadata).toHaveBeenCalled();
     expect(meta).toEqual(
diff --git a/app/[user]/identity/page.tsx b/app/[user]/identity/page.tsx
index b955d9743b..e7a45f1563 100644
--- a/app/[user]/identity/page.tsx
+++ b/app/[user]/identity/page.tsx
@@ -1,16 +1,19 @@
 import { createUserTabPage } from "@/app/[user]/_lib/userTabPageFactory";
 import type { ActivityLogParams } from "@/components/profile-activity/ProfileActivityLogs";
-import UserPageIdentityWrapper from "@/components/user/identity/UserPageIdentityWrapper";
 import {
   USER_PAGE_TAB_IDS,
   USER_PAGE_TAB_MAP,
 } from "@/components/user/layout/userTabs.config";
+import UserPageRepWrapper from "@/components/user/rep/UserPageRepWrapper";
+import type { ApiProfileRepRatesState } from "@/entities/IProfile";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
 import { getProfileLogTypes } from "@/helpers/profile-logs.helpers";
-import { getInitialRatersParams } from "@/helpers/server.helpers";
-import { ProfileActivityFilterTargetType, RateMatter } from "@/types/enums";
+import { ProfileActivityFilterTargetType } from "@/types/enums";
 
-const MATTER_TYPE = RateMatter.NIC;
+export interface UserPageRepPropsRepRates {
+  readonly ratings: ApiProfileRepRatesState;
+  readonly rater: string | null;
+}
 
 const getInitialActivityLogParams = (
   handleOrWallet: string
@@ -26,45 +29,31 @@ const getInitialActivityLogParams = (
   groupId: null,
 });
 
-function IdentityTab({ profile }: { readonly profile: ApiIdentity }) {
+function RepTab({ profile }: { readonly profile: ApiIdentity }) {
   const handleOrWallet = (
     profile.handle ??
     profile.wallets?.[0]?.wallet ??
     ""
   ).toLowerCase();
 
-  const initialCICGivenParams = getInitialRatersParams({
-    handleOrWallet,
-    matter: MATTER_TYPE,
-    given: false,
-  });
-
-  const initialCICReceivedParams = getInitialRatersParams({
-    handleOrWallet,
-    matter: MATTER_TYPE,
-    given: true,
-  });
-
   const initialActivityLogParams = getInitialActivityLogParams(handleOrWallet);
 
   return (
     <div className="tailwind-scope">
-      <UserPageIdentityWrapper
+      <UserPageRepWrapper
         profile={profile}
-        initialCICReceivedParams={initialCICReceivedParams}
-        initialCICGivenParams={initialCICGivenParams}
         initialActivityLogParams={initialActivityLogParams}
       />
     </div>
   );
 }
 
-const TAB_CONFIG = USER_PAGE_TAB_MAP[USER_PAGE_TAB_IDS.IDENTITY];
+const TAB_CONFIG = USER_PAGE_TAB_MAP[USER_PAGE_TAB_IDS.REP];
 
 const { Page, generateMetadata } = createUserTabPage({
   subroute: TAB_CONFIG.route,
   metaLabel: TAB_CONFIG.metaLabel,
-  Tab: IdentityTab,
+  Tab: RepTab,
 });
 
 export default Page;
diff --git a/app/[user]/rep/page.tsx b/app/[user]/rep/page.tsx
deleted file mode 100644
index ca06c160f5..0000000000
--- a/app/[user]/rep/page.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { createUserTabPage } from "@/app/[user]/_lib/userTabPageFactory";
-import type { ActivityLogParams } from "@/components/profile-activity/ProfileActivityLogs";
-import {
-  USER_PAGE_TAB_IDS,
-  USER_PAGE_TAB_MAP,
-} from "@/components/user/layout/userTabs.config";
-import UserPageRepWrapper from "@/components/user/rep/UserPageRepWrapper";
-import type { ApiProfileRepRatesState } from "@/entities/IProfile";
-import type { ApiIdentity } from "@/generated/models/ApiIdentity";
-import { getProfileLogTypes } from "@/helpers/profile-logs.helpers";
-import { getInitialRatersParams } from "@/helpers/server.helpers";
-import { ProfileActivityFilterTargetType, RateMatter } from "@/types/enums";
-
-export interface UserPageRepPropsRepRates {
-  readonly ratings: ApiProfileRepRatesState;
-  readonly rater: string | null;
-}
-
-const MATTER_TYPE = RateMatter.REP;
-
-const getInitialActivityLogParams = (
-  handleOrWallet: string
-): ActivityLogParams => ({
-  page: 1,
-  pageSize: 10,
-  logTypes: getProfileLogTypes({
-    logTypes: [],
-  }),
-  matter: RateMatter.REP,
-  targetType: ProfileActivityFilterTargetType.ALL,
-  handleOrWallet,
-  groupId: null,
-});
-
-function RepTab({ profile }: { readonly profile: ApiIdentity }) {
-  const handleOrWallet = (
-    profile.handle ??
-    profile.wallets?.[0]?.wallet ??
-    ""
-  ).toLowerCase();
-
-  const initialRepGivenParams = getInitialRatersParams({
-    handleOrWallet,
-    matter: MATTER_TYPE,
-    given: false,
-  });
-
-  const initialRepReceivedParams = getInitialRatersParams({
-    handleOrWallet,
-    matter: MATTER_TYPE,
-    given: true,
-  });
-  const initialActivityLogParams = getInitialActivityLogParams(handleOrWallet);
-
-  return (
-    <div className="tailwind-scope">
-      <UserPageRepWrapper
-        profile={profile}
-        initialRepReceivedParams={initialRepReceivedParams}
-        initialRepGivenParams={initialRepGivenParams}
-        initialActivityLogParams={initialActivityLogParams}
-      />
-    </div>
-  );
-}
-
-const TAB_CONFIG = USER_PAGE_TAB_MAP[USER_PAGE_TAB_IDS.REP];
-
-const { Page, generateMetadata } = createUserTabPage({
-  subroute: TAB_CONFIG.route,
-  metaLabel: TAB_CONFIG.metaLabel,
-  Tab: RepTab,
-});
-
-export default Page;
-export { generateMetadata };
diff --git a/components/brain/notifications/identity-rating/NotificationIdentityRating.tsx b/components/brain/notifications/identity-rating/NotificationIdentityRating.tsx
index 28d1f8d51c..750f3dd26d 100644
--- a/components/brain/notifications/identity-rating/NotificationIdentityRating.tsx
+++ b/components/brain/notifications/identity-rating/NotificationIdentityRating.tsx
@@ -41,7 +41,7 @@ export default function NotificationIdentityRating({
   const myHandle = connectedProfile?.handle;
   const getProfileLink = (): string | null => {
     if (!myHandle) return null;
-    return isRep ? `/${myHandle}/rep` : `/${myHandle}/identity`;
+    return `/${myHandle}/identity`;
   };
   const linkHref = getProfileLink();
 
diff --git a/components/common/OverlappingAvatars.tsx b/components/common/OverlappingAvatars.tsx
index ea296b6fb3..9e4af2689d 100644
--- a/components/common/OverlappingAvatars.tsx
+++ b/components/common/OverlappingAvatars.tsx
@@ -45,7 +45,7 @@ export default function OverlappingAvatars({
   const slice = items.slice(0, maxCount);
   const sizeClass = SIZE_CLASS[size];
   const avatarRing =
-    "tw-rounded-md tw-bg-iron-700 tw-ring-[1.5px] tw-ring-black tw-object-cover";
+    "tw-rounded-full tw-bg-iron-700 tw-ring-[1.5px] tw-ring-black tw-object-cover";
   const wrapperHover =
     "tw-transition-transform tw-duration-200 tw-ease-out hover:tw-scale-110 hover:!tw-z-[100]";
 
@@ -65,10 +65,10 @@ export default function OverlappingAvatars({
             alt={item.ariaLabel ?? "Profile"}
             loading="lazy"
             decoding="async"
-            className={`tw-h-full tw-w-full tw-flex-shrink-0 tw-rounded-md ${avatarRing}`}
+            className={`tw-h-full tw-w-full tw-flex-shrink-0 tw-rounded-full ${avatarRing}`}
           />
         ) : (
-          <div className="tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-rounded-md tw-bg-iron-700 tw-ring-[1.5px] tw-ring-black">
+          <div className="tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-rounded-full tw-bg-iron-700 tw-ring-[1.5px] tw-ring-black">
             <span className="tw-text-[0.625rem] tw-font-semibold tw-text-iron-300">
               {item.fallback ?? "?"}
             </span>
diff --git a/components/common/SystemAdjustmentPill.tsx b/components/common/SystemAdjustmentPill.tsx
index d0740091f9..e6cd7bfed5 100644
--- a/components/common/SystemAdjustmentPill.tsx
+++ b/components/common/SystemAdjustmentPill.tsx
@@ -1,5 +1,5 @@
 export const SystemAdjustmentPill: React.FC = () => (
-  <span className="tw-whitespace-nowrap tw-inline-flex tw-items-center tw-gap-x-1.5 tw-rounded-md tw-px-2 tw-py-0.5 tw-text-[0.6875rem] tw-font-medium tw-text-iron-300 tw-ring-1 tw-ring-inset tw-ring-iron-700">
+  <span className="tw-whitespace-nowrap tw-inline-flex tw-items-center tw-gap-x-1.5 tw-rounded-md tw-px-2 tw-py-0.5 tw-text-xs tw-font-medium tw-text-iron-300 tw-ring-1 tw-ring-inset tw-ring-iron-700">
     <svg
       className="tw-flex-shrink-0 tw-h-1.5 tw-w-1.5 tw-fill-red"
       viewBox="0 0 6 6"
@@ -8,4 +8,4 @@ export const SystemAdjustmentPill: React.FC = () => (
     </svg>
     <span>System Adjustment</span>
   </span>
-); 
\ No newline at end of file
+); 
diff --git a/components/header/header-search/HeaderSearchModal.tsx b/components/header/header-search/HeaderSearchModal.tsx
index d79638359e..60f7da772c 100644
--- a/components/header/header-search/HeaderSearchModal.tsx
+++ b/components/header/header-search/HeaderSearchModal.tsx
@@ -577,7 +577,7 @@ export default function HeaderSearchModal({
     const path = getProfileTargetRoute({
       handleOrWallet,
       pathname: pathname ?? "",
-      defaultPath: USER_PAGE_TAB_IDS.IDENTITY,
+      defaultPath: USER_PAGE_TAB_IDS.REP,
     });
     router.push(path);
     onClose();
diff --git a/components/header/header-search/HeaderSearchModalItem.tsx b/components/header/header-search/HeaderSearchModalItem.tsx
index 4e1179489f..45afd184e4 100644
--- a/components/header/header-search/HeaderSearchModalItem.tsx
+++ b/components/header/header-search/HeaderSearchModalItem.tsx
@@ -158,7 +158,7 @@ export default function HeaderSearchModalItem({
       return getProfileTargetRoute({
         handleOrWallet: profile.handle ?? profile.wallet.toLowerCase(),
         pathname: pathname ?? "",
-        defaultPath: USER_PAGE_TAB_IDS.IDENTITY,
+        defaultPath: USER_PAGE_TAB_IDS.REP,
       });
     } else if (isNft()) {
       const nft = getNft();
diff --git a/components/mobile-wrapper-dialog/MobileWrapperDialog.tsx b/components/mobile-wrapper-dialog/MobileWrapperDialog.tsx
index 2ec23c87c6..83d41bd099 100644
--- a/components/mobile-wrapper-dialog/MobileWrapperDialog.tsx
+++ b/components/mobile-wrapper-dialog/MobileWrapperDialog.tsx
@@ -18,6 +18,7 @@ export default function MobileWrapperDialog({
   noPadding,
   tall,
   fixedHeight,
+  tabletModal,
 }: {
   readonly title?: string | undefined;
   readonly isOpen: boolean;
@@ -28,6 +29,7 @@ export default function MobileWrapperDialog({
   readonly noPadding?: boolean | undefined;
   readonly tall?: boolean | undefined;
   readonly fixedHeight?: boolean | undefined;
+  readonly tabletModal?: boolean | undefined;
 }) {
   const { isCapacitor, isIos } = useCapacitor();
 
@@ -43,8 +45,14 @@ export default function MobileWrapperDialog({
     return `calc(${viewportHeight} - 10rem)`;
   };
 
-  const panelClassNames = `mobile-wrapper-dialog tw-pointer-events-auto tw-relative tw-w-screen md:tw-max-w-screen-md${
-    isIos ? "" : " tw-transform-gpu tw-will-change-transform"
+  const panelClassNames = `mobile-wrapper-dialog tw-pointer-events-auto tw-relative tw-w-screen${
+    tabletModal ? "" : " md:tw-max-w-screen-md"
+  }${isIos ? "" : " tw-transform-gpu tw-will-change-transform"}${
+    tabletModal ? " md:tw-w-full md:tw-max-w-md" : ""
+  }`;
+
+  const containerClassNames = `tw-pointer-events-none tw-fixed tw-inset-x-0 tw-bottom-0 tw-flex tw-max-w-full tw-justify-center tw-pt-10${
+    tabletModal ? " md:tw-inset-0 md:tw-items-center md:tw-pt-0 md:tw-p-6" : ""
   }`;
 
   return (
@@ -79,15 +87,23 @@ export default function MobileWrapperDialog({
             className="tw-absolute tw-inset-0 tw-overflow-hidden"
             onClick={(e) => e.stopPropagation()}
           >
-            <div className="tw-pointer-events-none tw-fixed tw-inset-x-0 tw-bottom-0 tw-flex tw-max-w-full tw-justify-center tw-pt-10">
+            <div className={containerClassNames}>
               <TransitionChild
                 as={Fragment}
                 enter="tw-duration-250 sm:tw-duration-350 tw-transform tw-transition tw-ease-in-out"
-                enterFrom="tw-translate-y-full"
-                enterTo="tw-translate-y-0"
+                enterFrom={`tw-translate-y-full${
+                  tabletModal ? " md:tw-translate-y-4 md:tw-opacity-0" : ""
+                }`}
+                enterTo={`tw-translate-y-0${
+                  tabletModal ? " md:tw-opacity-100" : ""
+                }`}
                 leave="tw-duration-250 sm:tw-duration-350 tw-transform tw-transition tw-ease-in-out"
-                leaveFrom="tw-translate-y-0"
-                leaveTo="tw-translate-y-full"
+                leaveFrom={`tw-translate-y-0${
+                  tabletModal ? " md:tw-opacity-100" : ""
+                }`}
+                leaveTo={`tw-translate-y-full${
+                  tabletModal ? " md:tw-translate-y-4 md:tw-opacity-0" : ""
+                }`}
               >
                 <DialogPanel
                   className={panelClassNames}
@@ -103,7 +119,7 @@ export default function MobileWrapperDialog({
                     leaveFrom="tw-opacity-100"
                     leaveTo="tw-opacity-0"
                   >
-                    <div className="tw-absolute -tw-top-16 tw-right-0 -tw-ml-8 tw-flex tw-pr-2 tw-pt-4 sm:-tw-ml-10 sm:tw-pr-4">
+                    <div className="tw-absolute -tw-top-16 tw-right-0 tw-flex tw-pt-4 tw-pr-2 md:tw-pr-0">
                       <button
                         type="button"
                         title="Close panel"
@@ -132,7 +148,7 @@ export default function MobileWrapperDialog({
                   <div
                     className={`tw-flex tw-scroll-py-3 tw-flex-col tw-overflow-y-auto tw-rounded-t-xl tw-bg-iron-950 ${
                       noPadding ? "tw-py-0" : "tw-py-6"
-                    }`}
+                    }${tabletModal ? " md:tw-rounded-xl" : ""}`}
                     style={{
                       ...(fixedHeight
                         ? { height: getHeight() }
diff --git a/components/profile-activity/ProfileActivityLogs.tsx b/components/profile-activity/ProfileActivityLogs.tsx
index e349ac2048..17075e1bbf 100644
--- a/components/profile-activity/ProfileActivityLogs.tsx
+++ b/components/profile-activity/ProfileActivityLogs.tsx
@@ -5,20 +5,21 @@ import type { CountlessPage } from "@/helpers/Types";
 import { commonApiFetch } from "@/services/api/common-api";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
-import CommonFilterTargetSelect from "../utils/CommonFilterTargetSelect";
 import ProfileActivityLogsFilter from "./filter/ProfileActivityLogsFilter";
 import ProfileActivityLogsList from "./list/ProfileActivityLogsList";
 
 import { convertActivityLogParams } from "@/helpers/profile-logs.helpers";
 import { selectActiveGroupId } from "@/store/groupSlice";
-import type {
+import {
   ProfileActivityFilterTargetType,
-  ProfileActivityLogType,
+  type ProfileActivityLogType,
   RateMatter,
 } from "@/types/enums";
 import { useSelector } from "react-redux";
 import { QueryKey } from "../react-query-wrapper/ReactQueryWrapper";
 import CommonCardSkeleton from "../utils/animation/CommonCardSkeleton";
+import type { CommonSelectItem } from "../utils/select/CommonSelect";
+import CommonTabs from "../utils/select/tabs/CommonTabs";
 import CommonTablePagination from "../utils/table/paginator/CommonTablePagination";
 
 export interface ActivityLogParams {
@@ -31,6 +32,27 @@ export interface ActivityLogParams {
   readonly groupId: string | null;
 }
 
+const MATTER_TAB_ITEMS: CommonSelectItem<RateMatter | null>[] = [
+  { label: "All", value: null, key: "all" },
+  { label: "REP", value: RateMatter.REP, key: "rep" },
+  { label: "NIC", value: RateMatter.NIC, key: "nic" },
+];
+
+const DIRECTION_TAB_ITEMS: CommonSelectItem<ProfileActivityFilterTargetType>[] =
+  [
+    { label: "All", value: ProfileActivityFilterTargetType.ALL, key: "all" },
+    {
+      label: "Incoming",
+      value: ProfileActivityFilterTargetType.INCOMING,
+      key: "incoming",
+    },
+    {
+      label: "Outgoing",
+      value: ProfileActivityFilterTargetType.OUTGOING,
+      key: "outgoing",
+    },
+  ];
+
 export interface ActivityLogParamsConverted {
   readonly page: string;
   readonly page_size: string;
@@ -45,11 +67,13 @@ export interface ActivityLogParamsConverted {
 export default function ProfileActivityLogs({
   initialParams,
   withFilters,
+  withMatterFilter = false,
   disableActiveGroup = false,
   children,
 }: {
   readonly initialParams: ActivityLogParams;
   readonly withFilters: boolean;
+  readonly withMatterFilter?: boolean | undefined;
   readonly disableActiveGroup?: boolean | undefined;
   readonly children?: React.ReactNode | undefined;
 }) {
@@ -61,11 +85,15 @@ export default function ProfileActivityLogs({
     initialParams.targetType
   );
   const [currentPage, setCurrentPage] = useState<number>(initialParams.page);
+  const [matter, setMatter] = useState<RateMatter | null>(
+    initialParams.matter
+  );
 
   useEffect(() => {
     setSelectedFilters(initialParams.logTypes);
     setTargetType(initialParams.targetType);
     setCurrentPage(initialParams.page);
+    setMatter(initialParams.matter);
   }, [initialParams]);
 
   const onFilter = (filter: ProfileActivityLogType) => {
@@ -82,13 +110,19 @@ export default function ProfileActivityLogs({
     setCurrentPage(1);
   };
 
+  const onMatterChange = (m: RateMatter | null) => {
+    setMatter(m);
+    setSelectedFilters(initialParams.logTypes);
+    setCurrentPage(1);
+  };
+
   const [params, setParams] = useState<ActivityLogParamsConverted>(
     convertActivityLogParams({
       params: {
         page: currentPage,
         pageSize: initialParams.pageSize,
         logTypes: selectedFilters,
-        matter: initialParams.matter,
+        matter,
         targetType,
         handleOrWallet: initialParams.handleOrWallet,
         groupId: activeGroupId,
@@ -104,7 +138,7 @@ export default function ProfileActivityLogs({
           page: currentPage,
           pageSize: initialParams.pageSize,
           logTypes: selectedFilters,
-          matter: initialParams.matter,
+          matter,
           targetType,
           handleOrWallet: initialParams.handleOrWallet,
           groupId: activeGroupId,
@@ -118,6 +152,7 @@ export default function ProfileActivityLogs({
     initialParams.handleOrWallet,
     targetType,
     activeGroupId,
+    matter,
   ]);
 
   const { isLoading, data: logs } = useQuery<CountlessPage<ProfileActivityLog>>(
@@ -148,29 +183,79 @@ export default function ProfileActivityLogs({
   }, [logs?.page, isLoading]);
   return (
     <div className={`${initialParams.handleOrWallet ? "" : "tw-mt-2"} `}>
-      <div className="tw-flex tw-w-full tw-flex-col tw-gap-y-4 min-[1200px]:tw-flex-row min-[1200px]:tw-items-center min-[1200px]:tw-justify-between min-[1200px]:tw-gap-x-16">
-        {children && <div>{children}</div>}
-        {withFilters && (
-          <div className="min-[1200px]:tw-flex min-[1200px]:tw-justify-end">
-            <div
-              className={`${children ? "" : "tw-mt-6"} min-[1200px]:tw-w-80`}
-            >
-              <ProfileActivityLogsFilter
-                user={initialParams.handleOrWallet}
-                options={initialParams.logTypes}
-                selected={selectedFilters}
-                setSelected={onFilter}
-              />
+      <div
+        className={`${
+          withMatterFilter
+            ? "tw-flex tw-w-full tw-flex-col tw-gap-y-4"
+            : "tw-flex tw-w-full tw-flex-col tw-gap-y-4 min-[1200px]:tw-flex-row min-[1200px]:tw-items-start min-[1200px]:tw-justify-between min-[1200px]:tw-gap-x-6"
+        }`}
+      >
+        {children && (
+          <div className="tw-flex-none tw-whitespace-nowrap">{children}</div>
+        )}
+        {withFilters && !withMatterFilter && (
+          <div className="tw-flex tw-w-full tw-flex-wrap tw-items-center tw-gap-3">
+            {initialParams.handleOrWallet && (
+              <div className="tw-flex-shrink-0">
+                <CommonTabs
+                  items={DIRECTION_TAB_ITEMS}
+                  activeItem={targetType}
+                  filterLabel="Filter direction"
+                  setSelected={onTargetType}
+                  size="sm"
+                  fill={false}
+                />
+              </div>
+            )}
+            {matter === RateMatter.NIC && (
+              <div className="md:tw-ml-auto tw-flex-1 md:tw-flex-none md:tw-w-[17.5rem] min-[1200px]:tw-w-[18rem] min-[1400px]:tw-w-[20rem]">
+                <ProfileActivityLogsFilter
+                  user={initialParams.handleOrWallet}
+                  options={initialParams.logTypes}
+                  selected={selectedFilters}
+                  setSelected={onFilter}
+                />
+              </div>
+            )}
+          </div>
+        )}
+        {withMatterFilter && (
+          <div className="tw-flex tw-w-full tw-items-center tw-gap-3">
+            <div className="tw-flex tw-flex-shrink-0 tw-items-center tw-gap-3">
+              <div className="tw-max-w-[12rem]">
+                <CommonTabs
+                  items={MATTER_TAB_ITEMS}
+                  activeItem={matter}
+                  filterLabel="Filter matter"
+                  setSelected={onMatterChange}
+                  size="sm"
+                />
+              </div>
+              {initialParams.handleOrWallet && (
+                <div className="tw-max-w-[16rem]">
+                  <CommonTabs
+                    items={DIRECTION_TAB_ITEMS}
+                    activeItem={targetType}
+                    filterLabel="Filter direction"
+                    setSelected={onTargetType}
+                    size="sm"
+                  />
+                </div>
+              )}
             </div>
+            {withFilters && matter === RateMatter.NIC && (
+              <div className="tw-ml-auto tw-w-[17.5rem] min-[1200px]:tw-w-[18rem] min-[1400px]:tw-w-[20rem]">
+                <ProfileActivityLogsFilter
+                  user={initialParams.handleOrWallet}
+                  options={initialParams.logTypes}
+                  selected={selectedFilters}
+                  setSelected={onFilter}
+                />
+              </div>
+            )}
           </div>
         )}
       </div>
-      {initialParams.handleOrWallet && (
-        <CommonFilterTargetSelect
-          selected={targetType}
-          onChange={onTargetType}
-        />
-      )}
       {logs ? (
         <div>
           {logs?.data.length ? (
@@ -185,14 +270,16 @@ export default function ProfileActivityLogs({
                 totalPages={null}
                 haveNextPage={logs.next}
                 small={!!initialParams.handleOrWallet}
+                showTopBorder={false}
+                className="tw-pt-6"
               />
             </div>
           ) : (
             <div className="tw-py-4">
               <span
                 className={`${
-                  initialParams.handleOrWallet ? "tw-px-4 sm:tw-px-6" : ""
-                } tw-text-sm tw-italic tw-text-iron-500 sm:tw-text-md`}
+                  initialParams.handleOrWallet ? "tw-px-2 sm:tw-px-3" : ""
+                } tw-text-sm tw-font-normal tw-italic tw-text-iron-500`}
               >
                 No Activity Log
               </span>
diff --git a/components/profile-activity/filter/ProfileActivityLogsFilter.tsx b/components/profile-activity/filter/ProfileActivityLogsFilter.tsx
index 89ef8f716e..fcf8c24b80 100644
--- a/components/profile-activity/filter/ProfileActivityLogsFilter.tsx
+++ b/components/profile-activity/filter/ProfileActivityLogsFilter.tsx
@@ -8,7 +8,7 @@ import { useClickAway, useKeyPressEvent } from "react-use";
 import ProfileActivityLogsFilterList from "./ProfileActivityLogsFilterList";
 
 export default function ProfileActivityLogsFilter({
-  user,
+  user: _user,
   selected,
   options,
   setSelected,
@@ -49,26 +49,24 @@ export default function ProfileActivityLogsFilter({
       <div className="tw-w-full">
         <div
           ref={listRef}
-          className={`${
-            user ? "tw-px-4 sm:tw-px-6" : ""
-          } tw-w-full sm:tw-max-w-xs`}
+          className="tw-w-full"
         >
           <div className="tw-relative">
             <button
               type="button"
-              className="tw-flex tw-w-full tw-items-center tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-px-3.5 tw-py-2.5 tw-text-base tw-font-light tw-text-iron-50 tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-iron-700 tw-transition tw-duration-300 tw-ease-out placeholder:tw-text-iron-500 hover:tw-ring-iron-700 focus:tw-bg-iron-950 focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-inset focus:tw-ring-primary-400 sm:tw-leading-6"
+              className="tw-flex tw-w-full tw-items-center tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-px-3.5 tw-py-2.5 tw-font-normal tw-text-iron-50 tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-iron-700 tw-transition tw-duration-300 tw-ease-out placeholder:tw-text-iron-500 hover:tw-ring-iron-700 focus:tw-bg-iron-950 focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-inset focus:tw-ring-primary-400 sm:tw-leading-6"
               onClick={(e) => {
                 e.stopPropagation();
                 toggleOpen();
               }}
             >
-              <span className="tw-block tw-truncate tw-text-base tw-font-normal tw-text-iron-400">
+              <span className="tw-block tw-truncate tw-text-sm tw-font-normal tw-text-iron-400">
                 {title}
               </span>
               <span className="tw-pointer-events-none tw-absolute tw-inset-y-0 tw-right-0 tw-flex tw-items-center tw-pr-3.5">
                 <svg
                   ref={iconScope}
-                  className="tw-h-5 tw-w-5 tw-text-iron-200"
+                  className="tw-h-4 tw-w-4 tw-text-iron-200"
                   viewBox="0 0 24 24"
                   fill="none"
                   xmlns="http://www.w3.org/2000/svg"
diff --git a/components/profile-activity/filter/ProfileActivityLogsFilterList.tsx b/components/profile-activity/filter/ProfileActivityLogsFilterList.tsx
index a6b613b739..342bd67d58 100644
--- a/components/profile-activity/filter/ProfileActivityLogsFilterList.tsx
+++ b/components/profile-activity/filter/ProfileActivityLogsFilterList.tsx
@@ -11,8 +11,8 @@ export default function UserPageIdentityActivityLogFilterList({
   readonly setSelected: (selected: ProfileActivityLogType) => void;
 }) {
   return (
-    <div className="tw-absolute tw-right-0 tw-mt-1 tw-w-full tw-origin-top-right tw-rounded-lg tw-bg-iron-800 tw-shadow-xl tw-ring-1 tw-ring-black tw-ring-opacity-5">
-      <ul className="tw-absolute tw-z-10 tw-mt-1 tw-max-h-[calc(20rem+_-10svh)] tw-w-full tw-list-none tw-overflow-auto tw-rounded-lg tw-bg-iron-800 tw-py-2 tw-pl-1.5 tw-pr-1.5 tw-text-base tw-shadow-xl tw-ring-1 tw-ring-inset tw-ring-white/10 focus:tw-outline-none sm:tw-text-sm">
+    <div className="tw-absolute tw-right-0 tw-mt-1 tw-min-w-[16rem] tw-w-full tw-origin-top-right tw-rounded-lg tw-bg-iron-800 tw-shadow-xl tw-ring-1 tw-ring-black tw-ring-opacity-5">
+      <ul className="tw-absolute tw-z-10 tw-mt-1 tw-max-h-[calc(20rem+_-10svh)] tw-w-full tw-list-none tw-overflow-x-hidden tw-overflow-y-auto tw-scrollbar-thin tw-scrollbar-track-iron-800 tw-scrollbar-thumb-iron-500 desktop-hover:hover:tw-scrollbar-thumb-iron-300 tw-rounded-lg tw-bg-iron-800 tw-py-2 tw-pl-1.5 tw-pr-1.5 tw-text-base tw-shadow-xl tw-ring-1 tw-ring-inset tw-ring-white/10 focus:tw-outline-none sm:tw-text-sm">
         {options.map((itemType) => (
           <ProfileActivityLogsFilterListItem
             key={itemType}
diff --git a/components/profile-activity/list/ProfileActivityLogsList.tsx b/components/profile-activity/list/ProfileActivityLogsList.tsx
index 65ce37aa7d..5208b8840d 100644
--- a/components/profile-activity/list/ProfileActivityLogsList.tsx
+++ b/components/profile-activity/list/ProfileActivityLogsList.tsx
@@ -10,17 +10,13 @@ export default function UserPageIdentityActivityLogList({
   readonly user: string | null;
 }) {
   return (
-    <div className={`${user ? "tw-px-4 sm:tw-px-6" : ""} tw-mt-2 tw-pb-2`}>
-      <div className="tailwind-scope tw-inline-block tw-min-w-full tw-align-middle">
-        <table className="tw-min-w-full">
-          <tbody className="tw-divide-y tw-divide-iron-800 tw-divide-solid tw-divide-x-0">
-            {logs.map((log) => (
-              <ProfileActivityLogItemWrapper key={log.id} log={log} user={user}>
-                <ProfileActivityLogsItem log={log} user={user} />
-              </ProfileActivityLogItemWrapper>
-            ))}
-          </tbody>
-        </table>
+    <div className="tw-mt-4 md:tw-mt-6">
+      <div className="tw-space-y-2.5">
+        {logs.map((log) => (
+          <ProfileActivityLogItemWrapper key={log.id} log={log} user={user}>
+            <ProfileActivityLogsItem log={log} user={user} />
+          </ProfileActivityLogItemWrapper>
+        ))}
       </div>
     </div>
   );
diff --git a/components/profile-activity/list/items/ProfileActivityLogBanner.tsx b/components/profile-activity/list/items/ProfileActivityLogBanner.tsx
index 65bf9e09c7..bcb818b8ba 100644
--- a/components/profile-activity/list/items/ProfileActivityLogBanner.tsx
+++ b/components/profile-activity/list/items/ProfileActivityLogBanner.tsx
@@ -23,7 +23,7 @@ export default function ProfileActivityLogBanner({
   return (
     <>
       <ProfileActivityLogItemAction action={isAdded ? "added" : "changed"} />
-      <span className="tw-whitespace-nowrap tw-text-base tw-font-medium tw-text-iron-300">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-font-medium tw-text-iron-300">
         {TITLE[log.type]}
       </span>
       {!isAdded && (
diff --git a/components/profile-activity/list/items/ProfileActivityLogClassification.tsx b/components/profile-activity/list/items/ProfileActivityLogClassification.tsx
index 27b4b4b5d2..fdaf13f188 100644
--- a/components/profile-activity/list/items/ProfileActivityLogClassification.tsx
+++ b/components/profile-activity/list/items/ProfileActivityLogClassification.tsx
@@ -14,12 +14,12 @@ export default function ProfileActivityLogClassification({
   return (
     <>
       <ProfileActivityLogItemAction action={isAdded ? "added" : "changed"} />
-      <span className="tw-whitespace-nowrap tw-text-base tw-text-iron-300 tw-font-medium">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-text-iron-300 tw-font-medium">
         classification
       </span>
       {!isAdded && (
         <>
-          <span className="tw-whitespace-nowrap tw-text-base tw-font-medium tw-text-iron-200">
+          <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-font-medium tw-text-iron-300">
             {log.contents.old_value &&
               CLASSIFICATIONS[log.contents.old_value].title}
           </span>
@@ -40,7 +40,7 @@ export default function ProfileActivityLogClassification({
         </>
       )}
 
-      <span className="tw-whitespace-nowrap tw-text-base tw-font-medium tw-text-iron-200">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-font-medium tw-text-iron-300">
         {CLASSIFICATIONS[log.contents.new_value].title}
       </span>
     </>
diff --git a/components/profile-activity/list/items/ProfileActivityLogContact.tsx b/components/profile-activity/list/items/ProfileActivityLogContact.tsx
index d27f99fdba..02e3d6d4cf 100644
--- a/components/profile-activity/list/items/ProfileActivityLogContact.tsx
+++ b/components/profile-activity/list/items/ProfileActivityLogContact.tsx
@@ -17,7 +17,7 @@ export default function ProfileActivityLogContact({
       <ProfileActivityLogItemAction
         action={PROFILE_ACTIVITY_LOG_ACTION_STR[log.contents.action]}
       />
-      <span className="tw-whitespace-nowrap tw-text-base tw-text-iron-300 tw-font-medium">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-text-iron-300 tw-font-medium">
         contact
       </span>
       <div className="tw-flex tw-items-center tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-200">
diff --git a/components/profile-activity/list/items/ProfileActivityLogGeneralStatement.tsx b/components/profile-activity/list/items/ProfileActivityLogGeneralStatement.tsx
index f87f36a705..3cc8e6d1ef 100644
--- a/components/profile-activity/list/items/ProfileActivityLogGeneralStatement.tsx
+++ b/components/profile-activity/list/items/ProfileActivityLogGeneralStatement.tsx
@@ -7,12 +7,12 @@ export default function ProfileActivityLogGeneralStatement({
   readonly log: ProfileActivityLogGeneralCicStatementEdit;
 }) {
   return (
-    <div className="tw-inline-flex tw-space-x-1 tw-max-w-xs sm:tw-max-w-sm md:tw-max-w-lg lg:tw-max-w-xl xl:tw-max-w-3xl 2xl:tw-max-w-5xl">
+    <div className="tw-flex tw-min-w-0 tw-max-w-full tw-gap-x-1">
       <ProfileActivityLogItemAction action="changed" />
-      <span className="tw-whitespace-nowrap tw-text-base tw-text-iron-300 tw-font-medium">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-text-iron-300 tw-font-medium">
         About
       </span>
-      <span className="tw-truncate tw-overflow-hidden tw-text-base tw-font-medium tw-text-iron-200">
+      <span className="tw-min-w-0 tw-truncate tw-overflow-hidden tw-text-sm lg:tw-text-base tw-font-medium tw-text-iron-300">
         {log.contents.statement.statement_value}
       </span>
     </div>
diff --git a/components/profile-activity/list/items/ProfileActivityLogHandle.tsx b/components/profile-activity/list/items/ProfileActivityLogHandle.tsx
index cbd92ecc7a..40b13354b2 100644
--- a/components/profile-activity/list/items/ProfileActivityLogHandle.tsx
+++ b/components/profile-activity/list/items/ProfileActivityLogHandle.tsx
@@ -10,12 +10,12 @@ export default function ProfileActivityLogHandle({
   return (
     <>
       <ProfileActivityLogItemAction action={isAdded ? "created" : "changed"} />
-      <span className="tw-whitespace-nowrap tw-text-base tw-text-iron-300 tw-font-medium">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-text-iron-300 tw-font-medium">
         handle
       </span>
       {!isAdded && (
         <>
-          <span className="tw-whitespace-nowrap tw-text-base tw-font-medium tw-text-iron-100">
+          <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-font-medium tw-text-iron-300">
             {log.contents.old_value}
           </span>
           <svg
@@ -35,7 +35,7 @@ export default function ProfileActivityLogHandle({
         </>
       )}
 
-      <span className="tw-whitespace-nowrap tw-text-base tw-font-medium tw-text-iron-200">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-font-medium tw-text-iron-300">
         {log.contents.new_value}
       </span>
     </>
diff --git a/components/profile-activity/list/items/ProfileActivityLogNFTAccount.tsx b/components/profile-activity/list/items/ProfileActivityLogNFTAccount.tsx
index 3d4006b166..c5a570f5b4 100644
--- a/components/profile-activity/list/items/ProfileActivityLogNFTAccount.tsx
+++ b/components/profile-activity/list/items/ProfileActivityLogNFTAccount.tsx
@@ -17,7 +17,7 @@ export default function ProfileActivityLogNFTAccount({
       <ProfileActivityLogItemAction
         action={PROFILE_ACTIVITY_LOG_ACTION_STR[log.contents.action]}
       />
-      <span className="tw-whitespace-nowrap tw-text-base tw-text-iron-300 tw-font-medium">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-text-iron-300 tw-font-medium">
         NFT Account
       </span>
       <div className="tw-flex tw-items-center tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-200">
diff --git a/components/profile-activity/list/items/ProfileActivityLogPfp.tsx b/components/profile-activity/list/items/ProfileActivityLogPfp.tsx
index e5d25e7009..629545ab69 100644
--- a/components/profile-activity/list/items/ProfileActivityLogPfp.tsx
+++ b/components/profile-activity/list/items/ProfileActivityLogPfp.tsx
@@ -15,7 +15,7 @@ export default function ProfileActivityLogPfp({
   return (
     <>
       <ProfileActivityLogItemAction action={isAdded ? "added" : "changed"} />
-      <span className="tw-whitespace-nowrap tw-text-base tw-text-iron-300 tw-font-medium">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-text-iron-300 tw-font-medium">
         profile picture
       </span>
 
diff --git a/components/profile-activity/list/items/ProfileActivityLogProfileArchived.tsx b/components/profile-activity/list/items/ProfileActivityLogProfileArchived.tsx
index c6644ceef7..d183141b08 100644
--- a/components/profile-activity/list/items/ProfileActivityLogProfileArchived.tsx
+++ b/components/profile-activity/list/items/ProfileActivityLogProfileArchived.tsx
@@ -7,13 +7,13 @@ export default function ProfileActivityLogProfileArchived({
 }) {
   return (
     <>
-      <span className="tw-whitespace-nowrap tw-text-base tw-text-iron-300 tw-font-medium">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-text-iron-300 tw-font-medium">
         profile
       </span>
-      <span className="tw-whitespace-nowrap tw-text-base tw-font-medium tw-text-iron-200">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-font-medium tw-text-iron-300">
         {log.contents.handle}
       </span>
-      <span className="tw-whitespace-nowrap tw-text-base tw-text-iron-300 tw-font-medium">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-text-iron-300 tw-font-medium">
         archived
       </span>
     </>
diff --git a/components/profile-activity/list/items/ProfileActivityLogProxy.tsx b/components/profile-activity/list/items/ProfileActivityLogProxy.tsx
index 0264f44218..11dbcd12d8 100644
--- a/components/profile-activity/list/items/ProfileActivityLogProxy.tsx
+++ b/components/profile-activity/list/items/ProfileActivityLogProxy.tsx
@@ -25,6 +25,7 @@ export default function ProfileActivityLogProxy({
         handleOrWallet={handleOrWallet}
         isCurrentUser={isCurrentUser}
         tabTarget={tabTarget}
+        textClassName="tw-text-sm lg:tw-text-base tw-font-semibold tw-text-iron-100"
       />
     </>
   );
diff --git a/components/profile-activity/list/items/ProfileActivityLogProxyAction.tsx b/components/profile-activity/list/items/ProfileActivityLogProxyAction.tsx
index 44ec33e589..5729001a12 100644
--- a/components/profile-activity/list/items/ProfileActivityLogProxyAction.tsx
+++ b/components/profile-activity/list/items/ProfileActivityLogProxyAction.tsx
@@ -23,7 +23,7 @@ export default function ProfileActivityLogProxyAction({
   return (
     <>
       <ProfileActivityLogItemAction action="created proxy action" />
-      <span className="tw-whitespace-nowrap tw-text-base tw-font-medium tw-text-iron-200">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-font-medium tw-text-iron-300">
         {PROFILE_PROXY_ACTION_LABELS[log.contents.type]}
       </span>
       <ProfileActivityLogItemAction action="for" />
@@ -31,6 +31,7 @@ export default function ProfileActivityLogProxyAction({
         handleOrWallet={handleOrWallet}
         isCurrentUser={isCurrentUser}
         tabTarget={tabTarget}
+        textClassName="tw-text-sm lg:tw-text-base tw-font-semibold tw-text-iron-100"
       />
     </>
   );
diff --git a/components/profile-activity/list/items/ProfileActivityLogProxyActionChange.tsx b/components/profile-activity/list/items/ProfileActivityLogProxyActionChange.tsx
index facb954609..e10effed74 100644
--- a/components/profile-activity/list/items/ProfileActivityLogProxyActionChange.tsx
+++ b/components/profile-activity/list/items/ProfileActivityLogProxyActionChange.tsx
@@ -50,13 +50,14 @@ export default function ProfileActivityLogProxyActionChange({
         handleOrWallet={handleOrWallet}
         isCurrentUser={isCurrentUser}
         tabTarget={tabTarget}
+        textClassName="tw-text-sm lg:tw-text-base tw-font-semibold tw-text-iron-100"
       />
       <ProfileActivityLogItemAction action="proxy" />
-      <span className="tw-whitespace-nowrap tw-text-base tw-font-medium tw-text-iron-200">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-font-medium tw-text-iron-300">
         {PROFILE_PROXY_ACTION_LABELS[log.contents.type]}
       </span>
       <ProfileActivityLogItemAction action={getChangedParamName()} />
-      <span className="tw-whitespace-nowrap tw-text-base tw-font-medium tw-text-iron-200">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-font-medium tw-text-iron-300">
         {getChangeParamValue()}
       </span>
     </>
diff --git a/components/profile-activity/list/items/ProfileActivityLogProxyActionState.tsx b/components/profile-activity/list/items/ProfileActivityLogProxyActionState.tsx
index 62da07a6cd..b550db49d0 100644
--- a/components/profile-activity/list/items/ProfileActivityLogProxyActionState.tsx
+++ b/components/profile-activity/list/items/ProfileActivityLogProxyActionState.tsx
@@ -35,13 +35,14 @@ export default function ProfileActivityLogProxyActionState({
         handleOrWallet={handleOrWallet}
         isCurrentUser={isCurrentUser}
         tabTarget={tabTarget}
+        textClassName="tw-text-sm lg:tw-text-base tw-font-semibold tw-text-iron-100"
       />
       <ProfileActivityLogItemAction action="proxy" />
-      <span className="tw-whitespace-nowrap tw-text-base tw-font-medium tw-text-iron-200">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-font-medium tw-text-iron-300">
         {PROFILE_PROXY_ACTION_LABELS[log.contents.type]}
       </span>
       <ProfileActivityLogItemAction action="status to" />
-      <span className="tw-whitespace-nowrap tw-text-base tw-font-medium tw-text-iron-200">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-font-medium tw-text-iron-300">
         {ACTION[log.contents.state_change_type]}
       </span>
     </>
diff --git a/components/profile-activity/list/items/ProfileActivityLogRate.tsx b/components/profile-activity/list/items/ProfileActivityLogRate.tsx
index 8c84d39534..e1c124e021 100644
--- a/components/profile-activity/list/items/ProfileActivityLogRate.tsx
+++ b/components/profile-activity/list/items/ProfileActivityLogRate.tsx
@@ -62,11 +62,11 @@ export default function ProfileActivityLogRate({
 
   const getTotalRatingClass = () => {
     if (isNewRatingPositive) {
-      return "tw-text-green";
+      return "tw-text-emerald-400";
     } else if (isNewRatingNegative) {
-      return "tw-text-red";
+      return "tw-text-rose-400";
     } else {
-      return "tw-text-iron-400";
+      return "tw-text-iron-500";
     }
   };
 
@@ -76,10 +76,7 @@ export default function ProfileActivityLogRate({
     (searchParams?.get("user") as string)?.toLowerCase() ===
     handleOrWallet.toLowerCase();
 
-  const tabTarget =
-    log.contents.rating_matter === RateMatter.REP
-      ? USER_PAGE_TAB_IDS.REP
-      : USER_PAGE_TAB_IDS.IDENTITY;
+  const tabTarget = USER_PAGE_TAB_IDS.REP;
 
   const getProxyHandle = (): string | null => {
     if (!log.proxy_handle) return null;
@@ -98,7 +95,7 @@ export default function ProfileActivityLogRate({
       {!!proxyHandle && isSelfProxy && (
         <Link
           href={`/${proxyHandle}`}
-          className="tw-whitespace-nowrap tw-text-xs tw-font-medium tw-text-iron-400 tw-no-underline"
+          className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-font-normal tw-text-iron-500 tw-no-underline"
         >
           (Proxy for {proxyHandle})
         </Link>
@@ -106,36 +103,37 @@ export default function ProfileActivityLogRate({
       <ProfileActivityLogItemAction action={ACTION[ratingType]} />
       <span
         className={`${
-          isChangePositive ? "tw-text-green" : "tw-text-red"
-        } tw-text-base tw-font-medium`}
+          isChangePositive ? "tw-text-emerald-400" : "tw-text-rose-400"
+        } tw-text-sm lg:tw-text-base tw-font-semibold`}
       >
         {changeStr}
       </span>
       <span
-        className={`${getTotalRatingClass()} tw-whitespace-nowrap tw-text-base tw-font-medium`}
+        className={`${getTotalRatingClass()} tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-font-semibold`}
       >
         (total {newRatingStr})
       </span>
       {log.contents.rating_matter === RateMatter.REP && (
-        <span className="tw-whitespace-nowrap tw-text-base tw-font-medium tw-text-iron-200">
+        <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-font-medium tw-text-iron-300">
           {log.contents.rating_category}
         </span>
       )}
-      <ProfileActivityLogItemAction
-        action={LOG_MATTER_STR[log.contents.rating_matter]}
-      />
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-font-medium tw-text-iron-300 empty:tw-hidden">
+        {LOG_MATTER_STR[log.contents.rating_matter]}
+      </span>
 
       <ProfileActivityLogItemAction action={TO_FROM[ratingType]} />
       <CommonProfileLink
         handleOrWallet={handleOrWallet}
         isCurrentUser={isCurrentUser}
         tabTarget={tabTarget}
+        textClassName="tw-text-sm lg:tw-text-base tw-font-semibold tw-text-iron-100"
       />
 
       {!!proxyHandle && !isSelfProxy && (
         <Link
           href={`/${proxyHandle}`}
-          className="tw-whitespace-nowrap tw-text-xs tw-font-medium tw-text-iron-400 tw-no-underline"
+          className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-font-normal tw-text-iron-500 tw-no-underline"
         >
           (Proxy: {proxyHandle})
         </Link>
diff --git a/components/profile-activity/list/items/ProfileActivityLogSocialMedia.tsx b/components/profile-activity/list/items/ProfileActivityLogSocialMedia.tsx
index 38cc73ded8..0a7ff94d04 100644
--- a/components/profile-activity/list/items/ProfileActivityLogSocialMedia.tsx
+++ b/components/profile-activity/list/items/ProfileActivityLogSocialMedia.tsx
@@ -17,7 +17,7 @@ export default function ProfileActivityLogSocialMedia({
       <ProfileActivityLogItemAction
         action={PROFILE_ACTIVITY_LOG_ACTION_STR[log.contents.action]}
       />
-      <span className="tw-whitespace-nowrap tw-text-base tw-text-iron-300 tw-font-medium">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-text-iron-300 tw-font-medium">
         social media account
       </span>
       <div className="tw-flex tw-items-center tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-200">
diff --git a/components/profile-activity/list/items/ProfileActivityLogSocialMediaVerificationPost.tsx b/components/profile-activity/list/items/ProfileActivityLogSocialMediaVerificationPost.tsx
index 9d69d5f9b0..5eeb476d95 100644
--- a/components/profile-activity/list/items/ProfileActivityLogSocialMediaVerificationPost.tsx
+++ b/components/profile-activity/list/items/ProfileActivityLogSocialMediaVerificationPost.tsx
@@ -17,7 +17,7 @@ export default function ProfileActivityLogSocialMediaVerificationPost({
       <ProfileActivityLogItemAction
         action={PROFILE_ACTIVITY_LOG_ACTION_STR[log.contents.action]}
       />
-      <span className="tw-whitespace-nowrap tw-text-base tw-text-iron-300 tw-font-medium">
+      <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-text-iron-300 tw-font-medium">
         social media verification post
       </span>
       <div className="tw-flex tw-items-center tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-200">
diff --git a/components/profile-activity/list/items/utils/ProfileActivityLogItemAction.tsx b/components/profile-activity/list/items/utils/ProfileActivityLogItemAction.tsx
index 1206400b08..180ba366e8 100644
--- a/components/profile-activity/list/items/utils/ProfileActivityLogItemAction.tsx
+++ b/components/profile-activity/list/items/utils/ProfileActivityLogItemAction.tsx
@@ -4,7 +4,7 @@ export default function ProfileActivityLogItemAction({
   readonly action: string;
 }) {
   return (
-    <span className="tw-whitespace-nowrap tw-text-base tw-text-iron-400 tw-font-medium">
+    <span className="tw-whitespace-nowrap tw-text-sm lg:tw-text-base tw-text-iron-500 tw-font-normal empty:tw-hidden">
       {action}
     </span>
   );
diff --git a/components/profile-activity/list/items/utils/ProfileActivityLogItemTimeAgo.tsx b/components/profile-activity/list/items/utils/ProfileActivityLogItemTimeAgo.tsx
index 8f0673ce53..9d42fcf426 100644
--- a/components/profile-activity/list/items/utils/ProfileActivityLogItemTimeAgo.tsx
+++ b/components/profile-activity/list/items/utils/ProfileActivityLogItemTimeAgo.tsx
@@ -8,7 +8,7 @@ export default function ProfileActivityLogItemTimeAgo({
 }) {
   const timeAgo = getTimeAgo(new Date(log.created_at).getTime());
   return (
-    <span className="tw-whitespace-nowrap tw-font-normal tw-text-sm sm:tw-text-base tw-text-iron-500">
+    <span className="tw-whitespace-nowrap tw-font-normal tw-text-xs lg:tw-text-sm tw-text-iron-500">
       {timeAgo}
     </span>
   );
diff --git a/components/profile-activity/list/items/utils/ProfileActivityLogItemValueWithCopy.tsx b/components/profile-activity/list/items/utils/ProfileActivityLogItemValueWithCopy.tsx
index ca1475187e..add2b9317b 100644
--- a/components/profile-activity/list/items/utils/ProfileActivityLogItemValueWithCopy.tsx
+++ b/components/profile-activity/list/items/utils/ProfileActivityLogItemValueWithCopy.tsx
@@ -4,6 +4,7 @@ import { Tooltip } from "react-tooltip";
 import { useEffect, useState } from "react";
 import { useCopyToClipboard } from "react-use";
 import CopyIcon from "@/components/utils/icons/CopyIcon";
+import { TOOLTIP_STYLES } from "@/helpers/tooltip.helpers";
 
 export default function ProfileActivityLogItemValueWithCopy({
   title,
@@ -29,27 +30,34 @@ export default function ProfileActivityLogItemValueWithCopy({
     }, 1000);
   };
   return (
-    <span className="tw-h-6 tw-whitespace-nowrap tw-group tw-inline-flex tw-text-base tw-font-medium tw-text-iron-200">
-      {titleToShow}
+    <span className="tw-group tw-inline-flex tw-h-6 tw-whitespace-nowrap tw-text-sm tw-font-medium tw-text-iron-300 lg:tw-text-base">
+      <span className={titleToShow === "Copied!" ? "tw-text-primary-400" : ""}>
+        {titleToShow}
+      </span>
       <>
         <button
           onClick={handleCopy}
           className={`${
-            isTouchScreen ? "tw-block" : "tw-hidden group-hover:tw-block"
-          } tw-mx-1 tw-bg-transparent tw-cursor-pointer tw-text-sm tw-font-semibold tw-text-iron-200 tw-border-0 focus:tw-outline-none tw-transition tw-duration-300 tw-ease-out`}
-          data-tooltip-id={`copy-activity-${value}`}>
-          <CopyIcon />
+            isTouchScreen
+              ? "tw-block"
+              : "tw-opacity-0 group-hover:tw-opacity-100"
+          } tw-mx-1 tw-cursor-pointer tw-border-0 tw-bg-transparent tw-text-sm tw-font-semibold tw-text-iron-500 tw-transition tw-duration-300 tw-ease-out hover:tw-text-iron-200 focus:tw-outline-none`}
+          data-tooltip-id={`copy-activity-${value}`}
+        >
+          <div className="tw-flex tw-h-5 tw-w-5 tw-flex-shrink-0 tw-items-center tw-justify-center lg:tw-h-4 lg:tw-w-4 [&>svg]:tw-h-full [&>svg]:tw-w-full">
+            <CopyIcon />
+          </div>
         </button>
         {!isTouchScreen && (
           <Tooltip
             id={`copy-activity-${value}`}
             place="top"
-            style={{
-              backgroundColor: "#1F2937",
-              color: "white",
-              padding: "4px 8px",
-            }}>
-            Copy
+            positionStrategy="fixed"
+            offset={8}
+            opacity={1}
+            style={TOOLTIP_STYLES}
+          >
+            <span className="tw-text-xs">Copy</span>
           </Tooltip>
         )}
       </>
diff --git a/components/profile-activity/list/items/utils/ProfileActivityLogItemWrapper.tsx b/components/profile-activity/list/items/utils/ProfileActivityLogItemWrapper.tsx
index b9f7b5b7f8..bb3c9496da 100644
--- a/components/profile-activity/list/items/utils/ProfileActivityLogItemWrapper.tsx
+++ b/components/profile-activity/list/items/utils/ProfileActivityLogItemWrapper.tsx
@@ -1,7 +1,11 @@
+"use client";
+
 import { USER_PAGE_TAB_IDS } from "@/components/user/layout/userTabs.config";
 import CommonProfileLink from "@/components/user/utils/CommonProfileLink";
 import type { ProfileActivityLog } from "@/entities/IProfile";
-import { ProfileActivityLogType, RateMatter } from "@/types/enums";
+import { getScaledImageUri, ImageScale } from "@/helpers/image.helpers";
+import { useIdentity } from "@/hooks/useIdentity";
+import { ProfileActivityLogType } from "@/types/enums";
 import ProfileActivityLogItemTimeAgo from "./ProfileActivityLogItemTimeAgo";
 
 export default function ProfileActivityLogItemWrapper({
@@ -27,29 +31,45 @@ export default function ProfileActivityLogItemWrapper({
   const isCurrentUser =
     user?.toLowerCase() === handleOrWallet.toLowerCase() || !user;
 
-  const tabTarget =
-    log.type === ProfileActivityLogType.RATING_EDIT &&
-    log.contents.rating_matter === RateMatter.REP
-      ? USER_PAGE_TAB_IDS.REP
-      : USER_PAGE_TAB_IDS.IDENTITY;
+  const tabTarget = USER_PAGE_TAB_IDS.REP;
+
+  const { profile } = useIdentity({
+    handleOrWallet: isArchived ? null : handleOrWallet,
+    initialProfile: null,
+  });
+
+  const pfp = profile?.pfp ?? null;
 
   return (
-    <tr className="tw-flex tw-items-center tw-justify-between">
-      <td className="tw-py-2.5">
-        <span className="tw-inline-flex tw-items-center tw-space-x-1.5">
-          {!isArchived && (
-            <CommonProfileLink
-              handleOrWallet={handleOrWallet}
-              isCurrentUser={isCurrentUser}
-              tabTarget={tabTarget}
-            />
-          )}
-          {children}
-        </span>
-      </td>
-      <td className="tw-py-2.5 tw-pl-3 tw-text-right">
-        <ProfileActivityLogItemTimeAgo log={log} />
-      </td>
-    </tr>
+    <div className="tw-group tw-p-4 tw-bg-[#0A0A0C]/50 hover:tw-bg-[#0A0A0C] tw-border tw-border-solid tw-border-white/[0.12] hover:tw-border-white/[0.16] tw-rounded-lg tw-transition-all tw-duration-200">
+      <div className="tw-flex tw-items-start tw-justify-between tw-gap-x-3">
+        <div className="tw-flex tw-min-w-0 tw-flex-1 tw-items-start tw-gap-x-3">
+          {!isArchived &&
+            (pfp ? (
+              <img
+                src={getScaledImageUri(pfp, ImageScale.W_AUTO_H_50)}
+                alt={handleOrWallet}
+                className="tw-h-6 tw-w-6 tw-flex-shrink-0 tw-rounded-md tw-bg-iron-700 tw-object-cover"
+              />
+            ) : (
+              <div className="tw-h-6 tw-w-6 tw-flex-shrink-0 tw-rounded-md tw-bg-iron-700" />
+            ))}
+          <div className="tw-flex tw-min-w-0 tw-flex-1 tw-flex-wrap tw-items-center tw-gap-x-1.5 tw-gap-y-1">
+            {!isArchived && (
+              <CommonProfileLink
+                handleOrWallet={handleOrWallet}
+                isCurrentUser={isCurrentUser}
+                tabTarget={tabTarget}
+                textClassName="tw-text-sm lg:tw-text-base tw-font-semibold tw-text-iron-100"
+              />
+            )}
+            {children}
+          </div>
+        </div>
+        <div className="tw-flex-shrink-0 tw-pl-3">
+          <ProfileActivityLogItemTimeAgo log={log} />
+        </div>
+      </div>
+    </div>
   );
 }
diff --git a/components/react-query-wrapper/ReactQueryWrapper.tsx b/components/react-query-wrapper/ReactQueryWrapper.tsx
index 5784069800..233d7e4d38 100644
--- a/components/react-query-wrapper/ReactQueryWrapper.tsx
+++ b/components/react-query-wrapper/ReactQueryWrapper.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import type { UserPageRepPropsRepRates } from "@/app/[user]/rep/page";
+import type { UserPageRepPropsRepRates } from "@/app/[user]/identity/page";
 import type {
   ApiProfileRepRatesState,
   ProfileActivityLog,
@@ -127,13 +127,6 @@ interface InitProfileRepPageParams {
   readonly handleOrWallet: string;
 }
 
-interface InitProfileIdentityPageParams {
-  readonly profile: ApiIdentity;
-  readonly activityLogs: InitProfileActivityLogsParams;
-  readonly cicGivenToUsers: InitProfileRatersParamsAndData;
-  readonly cicReceivedFromUsers: InitProfileRatersParamsAndData;
-}
-
 type ReactQueryWrapperContextType = {
   readonly setProfile: (profile: ApiIdentity) => void;
   readonly setWave: (wave: ApiWave) => void;
@@ -174,7 +167,6 @@ type ReactQueryWrapperContextType = {
   onProfileStatementRemove: (params: { profile: ApiIdentity }) => void;
   onIdentityFollowChange: () => void;
   initProfileRepPage: (params: InitProfileRepPageParams) => void;
-  initProfileIdentityPage: (params: InitProfileIdentityPageParams) => void;
   initCommunityActivityPage: ({
     activityLogs,
   }: {
@@ -212,7 +204,6 @@ export const ReactQueryWrapperContext =
     onProfileStatementRemove: () => {},
     onIdentityFollowChange: () => {},
     initProfileRepPage: () => {},
-    initProfileIdentityPage: () => {},
     initCommunityActivityPage: () => {},
     waitAndInvalidateDrops: async () => {},
     addOptimisticDrop: async () => {},
@@ -767,22 +758,6 @@ const createReactQueryContextValue = (
     setProfileRaters(repReceivedFromUsers);
   };
 
-  const initProfileIdentityPage = ({
-    profile,
-    activityLogs,
-    cicGivenToUsers,
-    cicReceivedFromUsers,
-  }: InitProfileIdentityPageParams) => {
-    setProfile(profile);
-    initProfileActivityLogs({
-      params: activityLogs.params,
-      data: activityLogs.data,
-      disableActiveGroup: true,
-    });
-    setProfileRaters(cicGivenToUsers);
-    setProfileRaters(cicReceivedFromUsers);
-  };
-
   const initCommunityActivityPage = ({
     activityLogs,
   }: {
@@ -992,7 +967,6 @@ const createReactQueryContextValue = (
     onProfileStatementAdd,
     onProfileStatementRemove,
     initProfileRepPage,
-    initProfileIdentityPage,
     initCommunityActivityPage,
     onGroupRemoved,
     onGroupChanged,
diff --git a/components/user/brain/UserPageBrainWrapper.tsx b/components/user/brain/UserPageBrainWrapper.tsx
index 4908a04e34..f708f18155 100644
--- a/components/user/brain/UserPageBrainWrapper.tsx
+++ b/components/user/brain/UserPageBrainWrapper.tsx
@@ -26,7 +26,7 @@ export default function UserPageBrainWrapper({
       return;
     }
     if (connectedProfile || !address) {
-      router.push(`/${user}/rep`);
+      router.push(`/${user}/identity`);
     }
   }, [connectedProfile, activeProfileProxy, address, showWaves]);
 
diff --git a/components/user/identity/UserPageIdentity.tsx b/components/user/identity/UserPageIdentity.tsx
deleted file mode 100644
index 7d9a61c160..0000000000
--- a/components/user/identity/UserPageIdentity.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { ApiIdentity } from "@/generated/models/ApiIdentity";
-import UserPageIdentityStatements from "./statements/UserPageIdentityStatements";
-import UserPageIdentityHeader from "./header/UserPageIdentityHeader";
-import type { ActivityLogParams } from "@/components/profile-activity/ProfileActivityLogs";
-import type {
-  ProfileRatersParams,
-} from "../utils/raters-table/wrapper/ProfileRatersTableWrapper";
-import ProfileRatersTableWrapper from "../utils/raters-table/wrapper/ProfileRatersTableWrapper";
-import UserPageIdentityActivityLog from "./activity/UserPageIdentityActivityLog";
-
-export default function UserPageIdentity({
-  profile,
-  initialCICReceivedParams,
-  initialCICGivenParams,
-  initialActivityLogParams,
-}: {
-  readonly profile: ApiIdentity;
-  readonly initialCICReceivedParams: ProfileRatersParams;
-  readonly initialCICGivenParams: ProfileRatersParams;
-  readonly initialActivityLogParams: ActivityLogParams;
-}) {
-  return (
-    <div className="tailwind-scope">
-      <UserPageIdentityHeader profile={profile} />
-      <UserPageIdentityStatements profile={profile} />
-
-      <div className="tw-mt-6 lg:tw-mt-10 xl:tw-flex xl:tw-items-stretch tw-space-y-8 lg:tw-space-y-10 xl:tw-space-y-0 tw-gap-x-8">
-        <ProfileRatersTableWrapper initialParams={initialCICGivenParams} />
-        <ProfileRatersTableWrapper initialParams={initialCICReceivedParams} />
-      </div>
-
-      <div className="tw-mt-8 lg:tw-mt-10">
-        <UserPageIdentityActivityLog
-          initialActivityLogParams={initialActivityLogParams}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/components/user/identity/UserPageIdentityWrapper.tsx b/components/user/identity/UserPageIdentityWrapper.tsx
deleted file mode 100644
index 341dc25231..0000000000
--- a/components/user/identity/UserPageIdentityWrapper.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-"use client";
-
-import type { ActivityLogParams } from "@/components/profile-activity/ProfileActivityLogs";
-import type { ApiIdentity } from "@/generated/models/ApiIdentity";
-import { useIdentity } from "@/hooks/useIdentity";
-import { useParams } from "next/navigation";
-import type { ProfileRatersParams } from "../utils/raters-table/wrapper/ProfileRatersTableWrapper";
-import UserPageSetUpProfileWrapper from "../utils/set-up-profile/UserPageSetUpProfileWrapper";
-import UserPageIdentity from "./UserPageIdentity";
-
-export default function UserPageIdentityWrapper({
-  profile: initialProfile,
-  initialCICReceivedParams,
-  initialCICGivenParams,
-  initialActivityLogParams,
-}: {
-  readonly profile: ApiIdentity;
-  readonly initialCICReceivedParams: ProfileRatersParams;
-  readonly initialCICGivenParams: ProfileRatersParams;
-  readonly initialActivityLogParams: ActivityLogParams;
-}) {
-  const params = useParams();
-  const user = (params?.["user"] as string)?.toLowerCase();
-
-  const { profile } = useIdentity({
-    handleOrWallet: user,
-    initialProfile: initialProfile,
-  });
-
-  return (
-    <UserPageSetUpProfileWrapper profile={profile ?? initialProfile}>
-      <UserPageIdentity
-        profile={profile ?? initialProfile}
-        initialCICReceivedParams={initialCICReceivedParams}
-        initialCICGivenParams={initialCICGivenParams}
-        initialActivityLogParams={initialActivityLogParams}
-      />
-    </UserPageSetUpProfileWrapper>
-  );
-}
diff --git a/components/user/identity/activity/UserPageIdentityActivityLog.tsx b/components/user/identity/activity/UserPageIdentityActivityLog.tsx
deleted file mode 100644
index a3bb78fdb4..0000000000
--- a/components/user/identity/activity/UserPageIdentityActivityLog.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type {
-  ActivityLogParams,
-} from "@/components/profile-activity/ProfileActivityLogs";
-import ProfileActivityLogs from "@/components/profile-activity/ProfileActivityLogs";
-import ProfileName, {
-  ProfileNameType,
-} from "@/components/profile-activity/ProfileName";
-import UserTableHeaderWrapper from "@/components/user/utils/UserTableHeaderWrapper";
-
-export default function UserPageIdentityActivityLog({
-  initialActivityLogParams,
-}: {
-  readonly initialActivityLogParams: ActivityLogParams;
-}) {
-  return (
-    <div>
-      <UserTableHeaderWrapper>
-        <span>
-          <ProfileName type={ProfileNameType.POSSESSION} />
-        </span>{" "}
-        NIC Activity Log
-      </UserTableHeaderWrapper>
-      <div className="tw-mt-4 tw-bg-iron-950 tw-border tw-border-iron-800 tw-border-solid tw-rounded-xl">
-        <ProfileActivityLogs
-          initialParams={initialActivityLogParams}
-          withFilters={true}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/components/user/identity/header/UserPageIdentityHeader.tsx b/components/user/identity/header/UserPageIdentityHeader.tsx
index 4ff6609af0..07c168b337 100644
--- a/components/user/identity/header/UserPageIdentityHeader.tsx
+++ b/components/user/identity/header/UserPageIdentityHeader.tsx
@@ -1,7 +1,4 @@
-import UserPageRateWrapper from "@/components/user/utils/rate/UserPageRateWrapper";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
-import { RateMatter } from "@/types/enums";
-import UserPageIdentityHeaderCICRate from "./cic-rate/UserPageIdentityHeaderCICRate";
 import UserPageIdentityHeaderCIC from "./UserPageIdentityHeaderCIC";
 
 export default function UserPageIdentityHeader({
@@ -10,27 +7,16 @@ export default function UserPageIdentityHeader({
   readonly profile: ApiIdentity;
 }) {
   return (
-    <div>
-      <div className="tw-lg:justify-between tw-mt-6 lg:tw-mt-8 lg:tw-flex lg:tw-items-center">
-        <div className="tw-min-w-0 tw-flex-1">
-          <div className="tw-flex tw-flex-col">
-            <h2 className="tw-mb-1 tw-text-xl tw-font-semibold tw-text-iron-100 sm:tw-text-2xl sm:tw-tracking-tight">
-              Network Identity Check (NIC)
-            </h2>
-            <p className="tw-mb-0 tw-text-sm tw-font-normal tw-text-iron-200 sm:tw-text-base">
-              Does the network believe this profile accurately represents its
-              identity?
-            </p>
-          </div>
-          <UserPageIdentityHeaderCIC profile={profile} />
-          <UserPageRateWrapper profile={profile} type={RateMatter.NIC}>
-            <UserPageIdentityHeaderCICRate
-              profile={profile}
-              isTooltip={false}
-            />
-          </UserPageRateWrapper>
-        </div>
+    <div className="tw-px-6 tw-pt-6">
+      <div className="tw-mb-6">
+        <h2 className="tw-mb-1 tw-text-xl tw-font-semibold tw-text-iron-100">
+          Network Identity Check (NIC)
+        </h2>
+        <p className="tw-mb-0 tw-text-iron-500 tw-text-sm tw-font-normal tw-leading-relaxed">
+          Does the network believe this profile accurately represents its identity?
+        </p>
       </div>
+      <UserPageIdentityHeaderCIC profile={profile} />
     </div>
   );
 }
diff --git a/components/user/identity/header/UserPageIdentityHeaderCIC.tsx b/components/user/identity/header/UserPageIdentityHeaderCIC.tsx
index 1a114ba880..d1cb7853ef 100644
--- a/components/user/identity/header/UserPageIdentityHeaderCIC.tsx
+++ b/components/user/identity/header/UserPageIdentityHeaderCIC.tsx
@@ -1,10 +1,20 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { QueryKey } from "@/components/react-query-wrapper/ReactQueryWrapper";
+import type { RatingWithProfileInfoAndLevel } from "@/entities/IProfile";
+import { SortDirection } from "@/entities/ISort";
+import UserCICStatus from "@/components/user/utils/user-cic-status/UserCICStatus";
+import UserCICTypeIconWrapper from "@/components/user/utils/user-cic-type/UserCICTypeIconWrapper";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
 import { formatNumberWithCommas } from "@/helpers/Helpers";
-import UserCICTypeIconWrapper from "@/components/user/utils/user-cic-type/UserCICTypeIconWrapper";
-import UserCICStatus from "@/components/user/utils/user-cic-status/UserCICStatus";
+import type { Page } from "@/helpers/Types";
+import { commonApiFetch } from "@/services/api/common-api";
+import { ProfileRatersParamsOrderBy, RateMatter } from "@/types/enums";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import TopRaterAvatars from "../../rep/header/TopRaterAvatars";
+
+const TOP_RATERS_COUNT = 5;
 
 export default function UserPageIdentityHeaderCIC({
   profile,
@@ -13,26 +23,66 @@ export default function UserPageIdentityHeaderCIC({
 }) {
   const [cicRating, setCicRating] = useState<number>(profile.cic);
 
+  const { data: ratings } = useQuery<Page<RatingWithProfileInfoAndLevel>>({
+    queryKey: [
+      QueryKey.PROFILE_RATERS,
+      {
+        handleOrWallet: profile.handle,
+        matter: RateMatter.NIC,
+        page: 1,
+        pageSize: 1,
+        order: SortDirection.DESC,
+        orderBy: ProfileRatersParamsOrderBy.RATING,
+        given: false,
+      },
+    ],
+    queryFn: async () =>
+      await commonApiFetch<Page<RatingWithProfileInfoAndLevel>>({
+        endpoint: `profiles/${profile.handle}/cic/ratings/by-rater`,
+        params: {
+          page: `${1}`,
+          page_size: `${1}`,
+          order: SortDirection.DESC.toLowerCase(),
+          order_by: ProfileRatersParamsOrderBy.RATING.toLowerCase(),
+          given: "false",
+        },
+      }),
+    enabled: !!profile.handle,
+  });
+
   useEffect(() => {
     setCicRating(profile.cic);
   }, [profile]);
 
   return (
-    <div className="tw-mb-6 tw-mt-4 tw-flex tw-flex-col sm:tw-flex-row sm:tw-flex-wrap sm:tw-space-x-6 tw-gap-y-1">
-      <div className="tw-flex tw-items-center tw-text-base tw-font-medium tw-text-iron-200">
-        <div className="tw-flex tw items-center tw-space-x-1">
-          <span>NIC:</span>
-          <span className="tw-text-iron-100 tw-font-semibold">
+    <div className="tw-mb-8">
+      <div className="tw-mb-2 tw-text-xs tw-font-semibold tw-uppercase tw-tracking-wider tw-text-iron-500">
+        NIC
+      </div>
+      <div className="tw-mt-1 tw-flex tw-items-start tw-justify-between tw-gap-6">
+        <div className="tw-flex tw-flex-col tw-items-start">
+          <div className="tw-text-3xl tw-font-semibold tw-leading-none tw-tracking-tight tw-text-white">
             {formatNumberWithCommas(cicRating)}
+          </div>
+          <div className="tw-mt-2 tw-flex tw-items-center tw-gap-1.5 tw-text-sm tw-font-semibold tw-uppercase">
+            <span className="-tw-mt-0.5 tw-h-4 tw-w-4 tw-flex-shrink-0">
+              <UserCICTypeIconWrapper profile={profile} />
+            </span>
+            <UserCICStatus cic={cicRating} />
+          </div>
+        </div>
+        <div className="tw-flex tw-shrink-0 tw-flex-col tw-items-end tw-gap-2.5">
+          <TopRaterAvatars
+            handleOrWallet={profile.handle ?? ""}
+            matter={RateMatter.NIC}
+            count={TOP_RATERS_COUNT}
+            size="md"
+          />
+          <span className="tw-text-sm tw-font-normal tw-text-iron-400">
+            {formatNumberWithCommas(ratings?.count ?? 0)}{" "}
+            {(ratings?.count ?? 0) === 1 ? "rater" : "raters"}
           </span>
         </div>
-        <span className="tw-ml-2 tw-h-5 tw-w-5">
-          <UserCICTypeIconWrapper profile={profile} />
-        </span>
-      </div>
-      <div className="tw-flex tw-items-center tw-text-base tw-font-semibold tw-space-x-1">
-        <span className="tw-text-iron-200 tw-font-medium">Status:</span>
-        <UserCICStatus cic={cicRating} />
       </div>
     </div>
   );
diff --git a/components/user/identity/header/cic-rate/UserPageIdentityHeaderCICRate.tsx b/components/user/identity/header/cic-rate/UserPageIdentityHeaderCICRate.tsx
index fa70e70829..36a9d265aa 100644
--- a/components/user/identity/header/cic-rate/UserPageIdentityHeaderCICRate.tsx
+++ b/components/user/identity/header/cic-rate/UserPageIdentityHeaderCICRate.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import type { FormEvent} from "react";
+import type { FormEvent } from "react";
 import { useContext, useEffect, useState } from "react";
 import type { ApiProfileRaterCicState } from "@/entities/IProfile";
 import { getStringAsNumberOrZero } from "@/helpers/Helpers";
@@ -14,22 +14,35 @@ import {
   QueryKey,
   ReactQueryWrapperContext,
 } from "@/components/react-query-wrapper/ReactQueryWrapper";
-import { createBreakpoint } from "react-use";
+
 import UserRateAdjustmentHelper from "@/components/user/utils/rate/UserRateAdjustmentHelper";
+import UserPageRateInput from "@/components/user/utils/rate/UserPageRateInput";
 import CircleLoader from "@/components/distribution-plan-tool/common/CircleLoader";
 import { ApiProfileProxyActionType } from "@/generated/models/ApiProfileProxyActionType";
 import UserPageIdentityHeaderCICRateStats from "./UserPageIdentityHeaderCICRateStats";
 import { useSeizeConnectContext } from "@/components/auth/SeizeConnectContext";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
 
-const useBreakpoint = createBreakpoint({ MD: 768, S: 0 });
+const CIC_SPAN_CLASS_NAME =
+  "tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-black/40 tw-rounded-l-lg tw-border tw-border-solid tw-border-white/[0.15] tw-px-3";
+
+const CIC_FOCUS_RING_CLASS_NAME =
+  "focus:tw-border-emerald-500 focus:tw-ring-1 focus:tw-ring-emerald-500/30";
+
+const CIC_INPUT_TOOLTIP_CLASS_NAME =
+  "tw-max-w-[12rem] -tw-ml-0.5 tw-appearance-none tw-block tw-rounded-l-none tw-rounded-r-lg tw-border tw-border-solid tw-border-white/[0.15] tw-py-3 tw-px-3 tw-bg-black/40 focus:tw-bg-black/60 tw-text-white tw-font-semibold tw-caret-emerald-400 tw-shadow-inner hover:tw-border-white/30 placeholder:tw-text-iron-500 focus:tw-outline-none tw-text-base sm:tw-text-sm tw-transition tw-duration-300 tw-ease-out";
+
+const CIC_INPUT_FULL_CLASS_NAME =
+  "tw-w-full -tw-ml-0.5 tw-appearance-none tw-block tw-rounded-l-none tw-rounded-r-lg tw-border tw-border-solid tw-border-white/[0.15] tw-py-3.5 tw-px-4 tw-bg-black/40 focus:tw-bg-black/60 tw-text-white tw-font-semibold tw-caret-emerald-400 tw-shadow-inner hover:tw-border-white/30 placeholder:tw-text-iron-500 focus:tw-outline-none tw-text-base sm:tw-text-sm tw-transition tw-duration-300 tw-ease-out";
 
 export default function UserPageIdentityHeaderCICRate({
   profile,
   isTooltip,
+  onSuccess,
 }: {
   readonly profile: ApiIdentity;
   readonly isTooltip: boolean;
+  readonly onSuccess?: () => void;
 }) {
   const { address } = useSeizeConnectContext();
   const { requestAuth, setToast, connectedProfile, activeProfileProxy } =
@@ -81,6 +94,7 @@ export default function UserPageIdentityHeaderCICRate({
           null,
         profileProxy: activeProfileProxy ?? null,
       });
+      onSuccess?.();
     },
     onError: (error) => {
       setToast({
@@ -169,98 +183,18 @@ export default function UserPageIdentityHeaderCICRate({
     `${originalRating}`
   );
 
-  const getValueStr = (strCIC: string): string => {
-    if (strCIC.length > 1 && strCIC.startsWith("0")) {
-      return strCIC.slice(1);
-    }
-    return strCIC;
-  };
-
   useEffect(() => {
     setOriginalRating(currentCICState?.cic_rating_by_rater ?? 0);
     setAdjustedRatingStr(`${currentCICState?.cic_rating_by_rater ?? 0}`);
   }, [currentCICState]);
 
-  const onValueChange = (e: FormEvent<HTMLInputElement>) => {
-    const inputValue = e.currentTarget.value;
-    const strCIC = ["-0", "0-"].includes(inputValue) ? "-" : inputValue;
-    if (/^-?\d*$/.test(strCIC)) {
-      const newCicValue = getValueStr(strCIC);
-      setAdjustedRatingStr(newCicValue);
-    }
-  };
-
-  const adjustStrValueToMinMax = (): void => {
-    if (activeProfileProxy) {
-      return;
-    }
-    const { min, max } = getMinMaxValues();
-    const valueAsNumber = getStringAsNumberOrZero(adjustedRatingStr);
-    if (valueAsNumber > max) {
-      setAdjustedRatingStr(`${max}`);
-      return;
-    }
-
-    if (valueAsNumber < min) {
-      setAdjustedRatingStr(`${min}`);
-    }
-  };
-
-  const getIsValidValue = (): boolean => {
-    if (activeProfileProxy) {
-      return true;
-    }
-    const { min, max } = minMaxValues;
-    const valueAsNumber = getStringAsNumberOrZero(adjustedRatingStr);
-    if (valueAsNumber > max) {
-      return false;
-    }
-
-    if (valueAsNumber < min) {
-      return false;
-    }
-    return true;
-  };
-
-  const [isValidValue, setIsValidValue] = useState<boolean>(getIsValidValue());
-
-  useEffect(() => setIsValidValue(getIsValidValue()), [adjustedRatingStr]);
-
-  const [newRating, setNewRating] = useState<number>(
-    getStringAsNumberOrZero(adjustedRatingStr)
-  );
-
-  useEffect(() => {
-    setNewRating(getStringAsNumberOrZero(adjustedRatingStr));
-  }, [adjustedRatingStr]);
-
-  const [haveChanged, setHaveChanged] = useState<boolean>(
-    newRating !== originalRating
-  );
-
-  useEffect(() => {
-    setHaveChanged(newRating !== originalRating);
-  }, [newRating, originalRating]);
-
-  const getIsSaveDisabled = (): boolean => {
-    if (!haveChanged) {
-      return true;
-    }
-
-    if (!isValidValue) {
-      return true;
-    }
-
-    return false;
-  };
-
-  const [isSaveDisabled, setIsSaveDisabled] = useState<boolean>(
-    getIsSaveDisabled()
-  );
-
-  useEffect(() => {
-    setIsSaveDisabled(getIsSaveDisabled());
-  }, [haveChanged, isValidValue]);
+  const newRating = getStringAsNumberOrZero(adjustedRatingStr);
+  const haveChanged = newRating !== originalRating;
+  const isProxy = !!activeProfileProxy;
+  const isValidValue =
+    isProxy ||
+    (newRating >= minMaxValues.min && newRating <= minMaxValues.max);
+  const isSaveDisabled = !haveChanged || !isValidValue;
 
   const onSave = async () => {
     const { success } = await requestAuth();
@@ -283,15 +217,88 @@ export default function UserPageIdentityHeaderCICRate({
     await onSave();
   };
 
-  const breakpoint = useBreakpoint();
+  const rateInput = (
+    <div
+      className={`tw-w-full tw-relative tw-flex ${
+        isTooltip ? "tw-mt-1.5" : "tw-mb-4"
+      }`}>
+      <UserPageRateInput
+        value={adjustedRatingStr}
+        onChange={setAdjustedRatingStr}
+        minMax={minMaxValues}
+        isProxy={isProxy}
+        spanClassName={CIC_SPAN_CLASS_NAME}
+        inputClassName={
+          isTooltip ? CIC_INPUT_TOOLTIP_CLASS_NAME : CIC_INPUT_FULL_CLASS_NAME
+        }
+        inputId="nic-rating-input"
+        focusRingClassName={CIC_FOCUS_RING_CLASS_NAME}
+        required
+      />
+    </div>
+  );
+
+  const tooltipButtonContent = mutating ? (
+    <div className="tw-w-8">
+      <CircleLoader />
+    </div>
+  ) : (
+    <>Rate</>
+  );
+
+  const fullButtonContent = mutating ? (
+    <div className="tw-flex tw-items-center tw-justify-center">
+      <div className="tw-w-8">
+        <CircleLoader />
+      </div>
+    </div>
+  ) : (
+    <>Rate</>
+  );
+
+  const adjustmentHelper = (
+    <UserRateAdjustmentHelper
+      inLineValues={isTooltip}
+      originalValue={originalRating}
+      adjustedValue={newRating}
+      adjustmentType="NIC"
+    />
+  );
 
   return (
     <div
       className={`${
         isTooltip
           ? ""
-          : "tw-bg-iron-950 tw-px-4 tw-py-6 lg:tw-p-8 tw-rounded-xl tw-border tw-border-solid tw-border-iron-800"
+          : "tw-pt-6 tw-border-t tw-border-x-0 tw-border-b-0 tw-border-solid tw-border-white/10"
       } `}>
+      {!isTooltip && (
+        <div className="tw-hidden lg:tw-flex tw-items-center tw-gap-2 tw-mb-4">
+          <svg
+            className="tw-w-4 tw-h-4 tw-flex-shrink-0 tw-text-emerald-400"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4" />
+            <path d="M14 13.12c0 2.38 0 6.38-1 8.88" />
+            <path d="M17.29 21.02c.12-.6.43-2.3.5-3.02" />
+            <path d="M2 12a10 10 0 0 1 18-6" />
+            <path d="M2 16h.01" />
+            <path d="M21.8 16c.2-2 .131-5.354 0-6" />
+            <path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2" />
+            <path d="M8.65 22c.21-.66.45-1.32.57-2" />
+            <path d="M9 6.8a6 6 0 0 1 9 5.2v2" />
+          </svg>
+          <span className="tw-text-base tw-font-semibold tw-text-emerald-400">
+            Rate NIC
+          </span>
+        </div>
+      )}
       <UserPageIdentityHeaderCICRateStats
         isTooltip={isTooltip}
         profile={profile}
@@ -302,101 +309,61 @@ export default function UserPageIdentityHeaderCICRate({
       />
       <form
         onSubmit={onSubmit}
-        className={`${isTooltip ? "tw-mt-4" : "tw-mt-6"}`}>
-        <div
-          className={`${
-            isTooltip ? "" : "tw-flex-wrap"
-          } tw-flex tw-items-end tw-gap-3`}>
-          <div className="tw-w-full sm:tw-w-auto">
+        className="tw-mt-4">
+        {isTooltip ? (
+          <>
+            <div className="tw-flex tw-items-end tw-gap-3">
+              <div className="tw-w-full sm:tw-w-auto">
+                <label
+                  htmlFor="nic-rating-input"
+                  className="tw-max-w-[12rem] tw-block tw-text-sm tw-font-normal tw-text-iron-200">
+                  Your total NIC Rating of{" "}
+                  <span className="tw-whitespace-nowrap">
+                    {profile.query}:
+                  </span>
+                </label>
+                {rateInput}
+              </div>
+              <div className="tw-w-full sm:tw-w-auto">
+                <div className="tw-w-full sm:tw-w-auto tw-inline-flex tw-items-end tw-space-x-6">
+                  <button
+                    type="submit"
+                    disabled={isSaveDisabled}
+                    className={`${
+                      !isSaveDisabled
+                        ? "hover:tw-bg-emerald-400 hover:tw-border-emerald-400"
+                        : "tw-cursor-not-allowed tw-opacity-50"
+                    } tw-w-full sm:tw-w-auto tw-bg-emerald-500 tw-px-4 tw-py-3 tw-text-sm tw-font-semibold tw-text-white tw-border tw-border-solid tw-border-emerald-500 tw-rounded-lg tw-shadow-lg tw-shadow-emerald-500/20 tw-transition tw-duration-300 tw-ease-out`}>
+                    {tooltipButtonContent}
+                  </button>
+                </div>
+              </div>
+            </div>
+            {adjustmentHelper}
+          </>
+        ) : (
+          <>
             <label
               htmlFor="nic-rating-input"
-              className={`${
-                isTooltip ? "tw-max-w-[12rem]" : "tw-w-full sm:tw-w-auto"
-              } tw-block tw-text-sm tw-font-normal tw-text-iron-200`}>
+              className="tw-block tw-text-xs tw-font-medium tw-text-iron-400 tw-mb-2">
               Your total NIC Rating of{" "}
-              <span className="tw-whitespace-nowrap">{profile.query}:</span>
+              <span className="tw-whitespace-nowrap">{profile.query}</span>
             </label>
-            <div className="tw-w-full tw-relative tw-flex tw-mt-1.5">
-              <span className="tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-iron-800 tw-rounded-l-lg tw-border tw-border-solid tw-border-iron-800 tw-px-3">
-                <svg
-                  className="tw-w-3.5 tw-h-3.5 tw-flex-shrink-0 tw-text-iron-500"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M12 5V19M5 12H19"
-                    stroke="currentColor"
-                    strokeWidth="3"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-                <svg
-                  className="tw-w-3.5 tw-h-3.5 tw-flex-shrink-0 tw-text-iron-500"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M5 12H19"
-                    stroke="currentColor"
-                    strokeWidth="3"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              </span>
-              <input
-                type="text"
-                id="nic-rating-input"
-                value={adjustedRatingStr}
-                onChange={onValueChange}
-                onBlur={adjustStrValueToMinMax}
-                required
-                autoComplete="off"
-                className={`${
-                  isTooltip ? "tw-max-w-[12rem]" : "tw-w-full sm:tw-w-auto"
-                } -tw-ml-0.5 tw-appearance-none tw-block tw-rounded-l-none tw-rounded-r-lg tw-border-0 tw-ring-1 tw-ring-inset tw-ring-iron-700 tw-py-3 tw-px-3 tw-bg-iron-900 focus:tw-bg-iron-950 tw-text-iron-100 tw-font-medium tw-caret-primary-400 tw-shadow-sm hover:tw-ring-iron-600 placeholder:tw-text-iron-500 focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-inset focus:tw-ring-primary-400 tw-text-base tw-transition tw-duration-300 tw-ease-out`}
-              />
-            </div>
-          </div>
-
-          <div className="tw-w-full sm:tw-w-auto">
-            <div className="tw-w-full sm:tw-w-auto tw-inline-flex tw-items-end tw-space-x-6">
-              <button
-                type="submit"
-                disabled={isSaveDisabled}
-                className={`${
-                  !isSaveDisabled
-                    ? "hover:tw-bg-primary-600 hover:tw-border-primary-600"
-                    : "tw-cursor-not-allowed tw-opacity-50"
-                } tw-w-full sm:tw-w-auto  tw-bg-primary-500 tw-px-4 tw-py-3 tw-text-sm tw-font-semibold tw-text-white 
-              tw-border tw-border-solid tw-border-primary-500 tw-rounded-lg  tw-transition tw-duration-300 tw-ease-out`}>
-                {mutating ? (
-                  <div className="tw-w-8">
-                    <CircleLoader />
-                  </div>
-                ) : (
-                  <>Rate</>
-                )}
-              </button>
-              {!isTooltip && breakpoint === "MD" && (
-                <UserRateAdjustmentHelper
-                  inLineValues={isTooltip}
-                  originalValue={originalRating}
-                  adjustedValue={getStringAsNumberOrZero(adjustedRatingStr)}
-                  adjustmentType="NIC"
-                />
-              )}
-            </div>
-          </div>
-        </div>
-        {!!(isTooltip || breakpoint !== "MD") && (
-          <UserRateAdjustmentHelper
-            inLineValues={isTooltip}
-            originalValue={originalRating}
-            adjustedValue={getStringAsNumberOrZero(adjustedRatingStr)}
-            adjustmentType="NIC"
-          />
+            {rateInput}
+
+            {adjustmentHelper}
+
+            <button
+              type="submit"
+              disabled={isSaveDisabled}
+              className={`${
+                isSaveDisabled
+                  ? "tw-cursor-not-allowed tw-opacity-50"
+                  : "hover:tw-bg-emerald-400 hover:tw-border-emerald-400 active:tw-scale-[0.98]"
+              } tw-mt-4 tw-w-full tw-bg-emerald-500 tw-py-3.5 tw-text-sm tw-font-semibold tw-text-white tw-border tw-border-solid tw-border-emerald-500 tw-rounded-lg tw-shadow-lg tw-shadow-emerald-500/20 tw-transition tw-duration-300 tw-ease-out`}>
+              {fullButtonContent}
+            </button>
+          </>
         )}
       </form>
     </div>
diff --git a/components/user/identity/header/cic-rate/UserPageIdentityHeaderCICRateStats.tsx b/components/user/identity/header/cic-rate/UserPageIdentityHeaderCICRateStats.tsx
index f8d54bfcda..0339ba4959 100644
--- a/components/user/identity/header/cic-rate/UserPageIdentityHeaderCICRateStats.tsx
+++ b/components/user/identity/header/cic-rate/UserPageIdentityHeaderCICRateStats.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { useContext, useEffect, useState } from "react";
 import { AuthContext } from "@/components/auth/Auth";
-import Link from "next/link";
-import { formatNumberWithCommas } from "@/helpers/Helpers";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
 import { ApiProfileProxyActionType } from "@/generated/models/ApiProfileProxyActionType";
+import { formatNumberWithCommas } from "@/helpers/Helpers";
+import Link from "next/link";
+import { useContext, useEffect, useState } from "react";
 
 export default function UserPageIdentityHeaderCICRateStats({
   isTooltip,
@@ -54,37 +54,79 @@ export default function UserPageIdentityHeaderCICRateStats({
     () => setAvailableCredit(getAvailableCredit()),
     [heroAvailableCredit, proxyAvailableCredit]
   );
-  return (
-    <div
-      className={`${
-        isTooltip ? "tw-text-sm" : "tw-text-base"
-      } tw-flex tw-flex-col tw-space-y-1`}>
-      {!!activeProfileProxy && (
-        <span className="tw-block tw-text-iron-200 tw-font-normal">
-          <span>You are acting as proxy for:</span>
-          <span className="tw-ml-1 tw-font-semibold tw-text-iron-100">
-            <Link href={`/${activeProfileProxy.created_by.handle}`}>
-              {activeProfileProxy.created_by.handle}
-            </Link>
+
+  const proxyItem = activeProfileProxy
+    ? {
+        label: "Proxy for",
+        value: (
+          <Link href={`/${activeProfileProxy.created_by.handle}`}>
+            {activeProfileProxy.created_by.handle}
+          </Link>
+        ),
+        valueColorClassName: "tw-text-emerald-400",
+        labelBreakAll: false,
+      }
+    : null;
+
+  const creditItem = activeProfileProxy
+    ? null
+    : {
+        label: "Your available NIC:",
+        value: formatNumberWithCommas(availableCredit),
+        valueColorClassName: "tw-text-iron-300",
+        labelBreakAll: false,
+      };
+
+  const minMaxItem = activeProfileProxy
+    ? null
+    : {
+        label: `Your max/min NIC Rating to ${profile.handle}:`,
+        value: `+/- ${formatNumberWithCommas(minMaxValues.max)}`,
+        valueColorClassName: "tw-text-iron-300",
+        labelBreakAll: true,
+      };
+
+  const items = [proxyItem, creditItem, minMaxItem].filter(
+    (item): item is NonNullable<typeof item> => item !== null
+  );
+
+  if (isTooltip) {
+    return (
+      <div className="tw-text-xs tw-flex tw-flex-col tw-space-y-1.5">
+        {items.map((item) => (
+          <span
+            key={item.label}
+            className={`tw-block tw-text-iron-500 tw-font-medium${
+              item.labelBreakAll ? " tw-break-all" : ""
+            }`}>
+            <span>
+              {item.label.endsWith(":") ? item.label : `${item.label}:`}
+            </span>
+            <span className={`tw-ml-1 tw-font-semibold ${item.valueColorClassName}`}>
+              {item.value}
+            </span>
           </span>
-        </span>
-      )}
-      {!activeProfileProxy && (
-        <span className="tw-block tw-text-iron-200 tw-font-normal">
-          <span>Your available NIC:</span>
-          <span className="tw-ml-1 tw-font-semibold tw-text-iron-100">
-            {formatNumberWithCommas(availableCredit)}
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="tw-rounded-lg tw-bg-white/[0.03] tw-border tw-border-solid tw-border-white/[0.06] tw-px-4 tw-py-3 tw-space-y-2.5">
+      {items.map((item) => (
+        <div
+          key={item.label}
+          className="tw-flex tw-items-center tw-justify-between">
+          <span
+            className="tw-text-xs tw-text-iron-500 tw-font-medium">
+            {item.label}
           </span>
-        </span>
-      )}
-      {!activeProfileProxy && (
-        <span className="tw-block tw-text-iron-200 tw-font-normal tw-break-all">
-          <span>Your max/min NIC Rating to {profile.handle}:</span>
-          <span className="tw-ml-1 tw-font-semibold tw-text-iron-100">
-            +/- {formatNumberWithCommas(minMaxValues.max)}
+          <span
+            className={`tw-whitespace-nowrap tw-text-xs tw-font-semibold ${item.valueColorClassName}`}>
+            {item.value}
           </span>
-        </span>
-      )}
+        </div>
+      ))}
     </div>
   );
 }
diff --git a/components/user/identity/statements/UserPageIdentityStatements.tsx b/components/user/identity/statements/UserPageIdentityStatements.tsx
index 52daca8d21..d6899670b7 100644
--- a/components/user/identity/statements/UserPageIdentityStatements.tsx
+++ b/components/user/identity/statements/UserPageIdentityStatements.tsx
@@ -3,6 +3,7 @@
 import { QueryKey } from "@/components/react-query-wrapper/ReactQueryWrapper";
 import type { CicStatement } from "@/entities/IProfile";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import { TOOLTIP_STYLES } from "@/helpers/tooltip.helpers";
 import { STATEMENT_GROUP } from "@/helpers/Types";
 import { commonApiFetch } from "@/services/api/common-api";
 import { useQuery } from "@tanstack/react-query";
@@ -84,26 +85,28 @@ export default function UserPageIdentityStatements({
   }, [statements]);
 
   return (
-    <div className="tw-mt-6 lg:tw-mt-8">
+    <div className="lg:tw-border-t lg:tw-border-x-0 lg:tw-border-b-0 lg:tw-border-solid lg:tw-border-white/10 tw-pt-6 tw-px-6">
       <div>
-        <UserPageIdentityAddStatementsHeader profile={profile} />
-        <div className="tw-mt-2 lg:tw-mt-4 tw-bg-iron-950 tw-border tw-border-iron-800 tw-border-solid tw-rounded-xl tw-scroll-py-3 tw-overflow-auto tw-scrollbar-thin tw-scrollbar-thumb-iron-500 tw-scrollbar-track-iron-800 desktop-hover:hover:tw-scrollbar-thumb-iron-300">
-          <div className="tw-relative tw-px-4 tw-py-6 lg:tw-p-8 tw-mx-auto tw-grid tw-grid-cols-1 xl:tw-gap-x-8 xl:tw-gap-y-2 lg:tw-mx-0 xl:tw-grid-cols-5">
+        <UserPageIdentityAddStatementsHeader
+          profile={profile}
+        />
+        <div className="tw-mt-2 lg:tw-mt-4 tw-scroll-py-3 tw-overflow-auto tw-scrollbar-thin tw-scrollbar-thumb-iron-700 tw-scrollbar-track-transparent desktop-hover:hover:tw-scrollbar-thumb-iron-500">
+          <div className="tw-relative tw-pb-6 lg:tw-pb-8 tw-mx-auto tw-grid tw-grid-cols-1 xl:tw-gap-x-8 xl:tw-gap-y-2 lg:tw-mx-0 xl:tw-grid-cols-5">
             <div className="tw-col-span-full tw-space-y-6 md:tw-space-y-8">
-              <div className="tw-grid tw-grid-cols-1 tw-gap-x-8 tw-gap-y-8 xl:tw-grid-cols-9">
-                <div className="tw-col-span-3">
+              <div className="tw-grid tw-grid-cols-1 tw-gap-y-6">
+                <div>
                   <UserPageIdentityStatementsConsolidatedAddresses
                     profile={profile}
                   />
                 </div>
-                <div className="tw-col-span-3">
+                <div>
                   <UserPageIdentityStatementsSocialMediaAccounts
                     statements={socialMediaAccounts}
                     profile={profile}
                     loading={isLoading}
                   />
                 </div>
-                <div className="tw-col-span-3">
+                <div>
                   <UserPageIdentityStatementsNFTAccounts
                     statements={nftAccounts}
                     profile={profile}
@@ -111,71 +114,40 @@ export default function UserPageIdentityStatements({
                   />
                 </div>
 
-                <div className="tw-col-span-3">
+                <div>
                   <UserPageIdentityStatementsContacts
                     statements={contacts}
                     profile={profile}
                     loading={isLoading}
                   />
                 </div>
-                <div className="tw-col-span-3">
+                <div>
                   <UserPageIdentityStatementsSocialMediaVerificationPosts
                     statements={socialMediaVerificationPosts}
                     profile={profile}
                     loading={isLoading}
                   />
                 </div>
-                <div className="tw-absolute tw-right-2 lg:tw-right-4 tw-top-2 xl:tw-top-4">
-                  <>
-                    <div
-                      tabIndex={0}
-                      role="button"
-                      aria-label="Statements help"
-                      className="tw-rounded-full tw-h-10 tw-w-10 tw-inline-flex tw-items-center tw-justify-center focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-inset focus:tw-ring-primary-400"
-                      data-tooltip-id="statements-help">
-                      <svg
-                        className="tw-flex-shrink-0 tw-w-5 tw-h-5 tw-text-iron-400"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        aria-hidden="true"
-                        xmlns="http://www.w3.org/2000/svg">
-                        <path
-                          d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                    </div>
-                    <Tooltip
-                      id="statements-help"
-                      place="top"
-                      style={{
-                        backgroundColor: "#1F2937",
-                        color: "white",
-                        padding: "4px 8px",
-                      }}>
-                      <ul className="tw-pl-4 tw-list-disc tw-text-iron-300 tw-font-normal tw-space-y-1">
-                        <li>All statements are optional.</li>
-                        <li>
-                          All statements are fully and permanently public.
-                        </li>
-                        <li>
-                          Seize does not connect to social media accounts or
-                          verify posts.
-                        </li>
-                        <li>
-                          The community will rate the accuracy of statements.
-                        </li>
-                      </ul>
-                    </Tooltip>
-                  </>
-                </div>
               </div>
             </div>
           </div>
         </div>
+        <Tooltip
+          id="statements-help"
+          place="top"
+          positionStrategy="fixed"
+          offset={8}
+          opacity={1}
+          style={TOOLTIP_STYLES}>
+          <ul className="tw-m-0 tw-py-2 tw-pl-4 tw-list-disc tw-text-iron-300 tw-font-normal tw-space-y-1">
+            <li>All statements are optional.</li>
+            <li>All statements are fully and permanently public.</li>
+            <li>
+              Seize does not connect to social media accounts or verify posts.
+            </li>
+            <li>The community will rate the accuracy of statements.</li>
+          </ul>
+        </Tooltip>
       </div>
     </div>
   );
diff --git a/components/user/identity/statements/consolidated-addresses/UserPageIdentityStatementsConsolidatedAddresses.tsx b/components/user/identity/statements/consolidated-addresses/UserPageIdentityStatementsConsolidatedAddresses.tsx
index ba4227fa51..c9c4520595 100644
--- a/components/user/identity/statements/consolidated-addresses/UserPageIdentityStatementsConsolidatedAddresses.tsx
+++ b/components/user/identity/statements/consolidated-addresses/UserPageIdentityStatementsConsolidatedAddresses.tsx
@@ -1,20 +1,20 @@
 "use client";
 
-import { useContext, useEffect, useState } from "react";
 import type { WalletConsolidationState } from "@/entities/IProfile";
-import EthereumIcon from "@/components/user/utils/icons/EthereumIcon";
-import UserPageIdentityStatementsConsolidatedAddressesItem from "./UserPageIdentityStatementsConsolidatedAddressesItem";
-import { amIUser } from "@/helpers/Helpers";
-import { commonApiFetch } from "@/services/api/common-api";
-import { useQueries } from "@tanstack/react-query";
-import type { Page } from "@/helpers/Types";
-import Link from "next/link";
-import { AnimatePresence } from "framer-motion";
+import { useContext, useEffect, useState } from "react";
+
 import { AuthContext } from "@/components/auth/Auth";
 import { useSeizeConnectContext } from "@/components/auth/SeizeConnectContext";
 import { QueryKey } from "@/components/react-query-wrapper/ReactQueryWrapper";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
 import type { ApiWallet } from "@/generated/models/ApiWallet";
+import { amIUser } from "@/helpers/Helpers";
+import type { Page } from "@/helpers/Types";
+import { commonApiFetch } from "@/services/api/common-api";
+import { useQueries } from "@tanstack/react-query";
+import { AnimatePresence } from "framer-motion";
+import Link from "next/link";
+import UserPageIdentityStatementsConsolidatedAddressesItem from "./UserPageIdentityStatementsConsolidatedAddressesItem";
 export default function UserPageIdentityStatementsConsolidatedAddresses({
   profile,
 }: {
@@ -119,18 +119,34 @@ export default function UserPageIdentityStatementsConsolidatedAddresses({
 
   return (
     <div>
-      <div className="tw-flex tw-items-center tw-space-x-4">
-        <div className="tw-flex tw-h-9 tw-w-9 tw-items-center tw-justify-center tw-rounded-lg tw-bg-iron-950 tw-border tw-border-solid tw-border-iron-800">
-        <div className="tw-flex tw-items-center tw-justify-center tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-100">
-            <EthereumIcon />
-          </div>
-        </div>
-        <span className="tw-text-base tw-font-semibold tw-text-iron-100">
+      <div className="tw-flex tw-items-center tw-justify-between">
+        <span className="tw-text-xs tw-font-semibold tw-uppercase tw-tracking-wider tw-text-iron-500">
           Consolidated Addresses
         </span>
+        <button
+          type="button"
+          aria-label="Statements help"
+          className="tw-inline-flex tw-h-8 tw-w-8 tw-appearance-none tw-items-center tw-justify-center tw-rounded-full tw-border-0 tw-bg-transparent tw-text-iron-400 hover:tw-bg-white/5 hover:tw-text-iron-200 focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-inset focus:tw-ring-emerald-400"
+          data-tooltip-id="statements-help"
+        >
+          <svg
+            className="tw-h-4 tw-w-4 tw-flex-shrink-0 tw-text-iron-400"
+            viewBox="0 0 24 24"
+            fill="none"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
       </div>
-      <div className="tw-mt-3 tw-h-px tw-bg-white/5 tw-w-full"></div>
-      <ul className="tw-mb-0 tw-mt-3 md:tw-mt-4 lg:tw-mt-6 tw-list-none tw-space-y-2 md:tw-space-y-4 tw-pl-0 tw-text-base tw-leading-7 tw-text-gray-600">
+      <ul className="tw-mb-0 tw-mt-4 tw-list-none tw-space-y-3 tw-pl-0">
         {sortedByPrimary.map((wallet) => (
           <UserPageIdentityStatementsConsolidatedAddressesItem
             key={wallet.wallet}
@@ -143,14 +159,16 @@ export default function UserPageIdentityStatementsConsolidatedAddresses({
       <div className="tw-space-x-3 tw-pt-5 xl:tw-pt-4">
         <Link
           href={`/delegation/wallet-checker?address=${primaryAddress}`}
-          className="tw-no-underline tw-relative tw-text-xs tw-font-medium tw-inline-flex tw-items-center tw-rounded-lg tw-bg-iron-800 tw-px-2.5 tw-py-2 tw-text-iron-200 hover:tw-text-iron-200 focus:tw-outline-none tw-border tw-border-iron-800 tw-ring-1 tw-ring-inset tw-ring-iron-800 hover:tw-bg-iron-700 focus:tw-z-10 tw-transition tw-duration-300 tw-ease-out">
+          className="tw-relative tw-inline-flex tw-items-center tw-rounded-lg tw-border tw-border-solid tw-border-white/10 tw-bg-white/[0.04] tw-px-2.5 tw-py-2 tw-text-xs tw-font-medium tw-text-iron-200 tw-no-underline tw-ring-0 tw-transition tw-duration-300 tw-ease-out hover:tw-bg-white/[0.08] hover:tw-text-iron-200 focus:tw-z-10 focus:tw-outline-none"
+        >
           Wallet Checker
         </Link>
         <AnimatePresence mode="wait" initial={false}>
           {showDelegationCenter && (
             <Link
               href="/delegation/delegation-center"
-              className="tw-no-underline tw-relative tw-text-xs tw-font-medium tw-inline-flex tw-items-center tw-rounded-lg tw-bg-iron-800 tw-px-2.5 tw-py-2 tw-text-iron-200 hover:tw-text-iron-200 focus:tw-outline-none tw-border tw-border-iron-800 tw-ring-1 tw-ring-inset tw-ring-iron-800 hover:tw-bg-iron-700 focus:tw-z-10 tw-transition tw-duration-300 tw-ease-out">
+              className="tw-relative tw-inline-flex tw-items-center tw-rounded-lg tw-border tw-border-solid tw-border-white/10 tw-bg-white/[0.04] tw-px-2.5 tw-py-2 tw-text-xs tw-font-medium tw-text-iron-200 tw-no-underline tw-ring-0 tw-transition tw-duration-300 tw-ease-out hover:tw-bg-white/[0.08] hover:tw-text-iron-200 focus:tw-z-10 focus:tw-outline-none"
+            >
               Delegation Center
             </Link>
           )}
diff --git a/components/user/identity/statements/consolidated-addresses/UserPageIdentityStatementsConsolidatedAddressesItem.tsx b/components/user/identity/statements/consolidated-addresses/UserPageIdentityStatementsConsolidatedAddressesItem.tsx
index dc77555de1..401683cd74 100644
--- a/components/user/identity/statements/consolidated-addresses/UserPageIdentityStatementsConsolidatedAddressesItem.tsx
+++ b/components/user/identity/statements/consolidated-addresses/UserPageIdentityStatementsConsolidatedAddressesItem.tsx
@@ -13,6 +13,7 @@ import {
 } from "@/constants/constants";
 import type { ApiWallet } from "@/generated/models/ApiWallet";
 import { getTransactionLink } from "@/helpers/Helpers";
+import { TOOLTIP_STYLES } from "@/helpers/tooltip.helpers";
 import { useEffect, useState } from "react";
 import { Tooltip } from "react-tooltip";
 import { useCopyToClipboard } from "react-use";
@@ -142,118 +143,97 @@ export default function UserPageIdentityStatementsConsolidatedAddressesItem({
 
   return (
     <li>
-      <div className="tw-group tw-flex tw-h-5 tw-items-center tw-space-x-3 tw-text-sm tw-font-medium tw-text-iron-200 tw-transition tw-duration-300 tw-ease-out hover:tw-text-iron-400 sm:tw-text-md">
-        <button
-          onClick={goToOpensea}
-          aria-label="Go to Opensea"
-          className="tw-border-none tw-bg-transparent tw-p-0"
-          data-tooltip-id={`opensea-tooltip-${address.wallet}`}
-          {...(isTouchScreen ? null : { "data-tooltip-content": "Opensea" })}
-        >
-          <div className="tw-h-6 tw-w-6 tw-flex-shrink-0 tw-transition tw-duration-300 tw-ease-out hover:tw-scale-110 sm:tw-h-5 sm:tw-w-5">
-            <OpenseaIcon />
-          </div>
-        </button>
-        {!isTouchScreen && (
-          <Tooltip
-            id={`opensea-tooltip-${address.wallet}`}
-            place="top"
-            positionStrategy="fixed"
-            style={{
-              backgroundColor: "#1F2937",
-              color: "white",
-              padding: "4px 8px",
-            }}
-          />
-        )}
-        <button
-          onClick={goToEtherscan}
-          aria-label="Go to Etherscan"
-          className="tw-border-none tw-bg-transparent tw-p-0"
-          data-tooltip-id={`etherscan-tooltip-${address.wallet}`}
-          {...(!isTouchScreen ? { "data-tooltip-content": "Etherscan" } : null)}
-        >
-          <div className="tw-h-6 tw-w-6 tw-flex-shrink-0 tw-transition tw-duration-300 tw-ease-out hover:tw-scale-110 sm:tw-h-5 sm:tw-w-5">
-            <EtherscanIcon />
-          </div>
-        </button>
-        {!isTouchScreen && (
-          <Tooltip
-            id={`etherscan-tooltip-${address.wallet}`}
-            place="top"
-            positionStrategy="fixed"
-            style={{
-              backgroundColor: "#1F2937",
-              color: "white",
-              padding: "4px 8px",
-            }}
-          />
-        )}
-        <div className="tw-inline-flex tw-items-center tw-space-x-3">
-          <div className="tw-truncate tw-text-iron-200 md:tw-max-w-[8rem] lg:tw-max-w-[11rem]">
-            <span>
+      <div className="tw-group tw-flex tw-items-center tw-justify-between tw-gap-x-3 tw-py-1">
+        <div className="tw-flex-1 tw-min-w-0">
+          <div className="tw-flex tw-items-center tw-gap-2 tw-mb-0.5">
+            <span className="tw-text-xs tw-font-normal tw-text-iron-400 tw-font-mono">
               {title === "Copied!" ? (
                 <span className="tw-text-primary-400">{title}</span>
               ) : (
                 title
               )}
             </span>
-            {address.display && (
-              <span className="tw-ml-3">{address.display}</span>
-            )}
-          </div>
-          <div className="tw-inline-flex tw-items-center">
-            <svg
-              className="tw-h-5 tw-w-5 tw-flex-shrink-0"
-              viewBox="0 0 24 24"
-              fill="none"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M20 6L9 17L4 12"
-                stroke="#3CCB7F"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
             <UserPageIdentityStatementsConsolidatedAddressesItemPrimary
               isPrimary={isPrimary}
               canEdit={canEdit}
               assignPrimary={assignPrimary}
               isAssigningPrimary={assigningPrimary}
             />
-            <button
-              aria-label="Copy address"
-              className={`${
-                isTouchScreen
-                  ? "tw-opacity-100"
-                  : "tw-opacity-0 group-hover:tw-opacity-100"
-              } tw-ml-2 tw-cursor-pointer tw-border-0 tw-bg-transparent tw-p-1.5 tw-text-xs tw-font-semibold tw-text-iron-400 tw-transition tw-duration-300 tw-ease-out hover:tw-text-iron-200 focus:tw-outline-none`}
-              onClick={handleCopy}
-              data-tooltip-id={`copy-tooltip-${address.wallet}`}
-              {...(!isTouchScreen ? { "data-tooltip-content": "Copy" } : null)}
-            >
-              <CopyIcon />
-            </button>
-            {!isTouchScreen && (
-              <Tooltip
-                id={`copy-tooltip-${address.wallet}`}
-                place="top"
-                positionStrategy="fixed"
-                style={{
-                  backgroundColor: "#1F2937",
-                  color: "white",
-                  padding: "4px 8px",
-                }}
-              />
-            )}
           </div>
+          {address.display && (
+            <div className="tw-text-xs tw-font-semibold tw-font-mono tw-text-iron-200 tw-truncate tw-max-w-[130px]">
+              {address.display}
+            </div>
+          )}
+        </div>
+        <div className="tw-flex tw-items-center tw-gap-3 lg:tw-gap-2 tw-ml-auto tw-flex-shrink-0">
+          <button
+            onClick={goToEtherscan}
+            aria-label="Go to Etherscan"
+            className="tw-border-none tw-bg-transparent tw-p-1.5 lg:tw-p-0 tw-cursor-pointer tw-text-iron-500 hover:tw-text-iron-200 tw-transition tw-duration-300 tw-ease-out"
+            data-tooltip-id={`etherscan-tooltip-${address.wallet}`}
+            {...(!isTouchScreen ? { "data-tooltip-content": "Etherscan" } : null)}
+          >
+            <div className="tw-h-5 tw-w-5 lg:tw-h-4 lg:tw-w-4 tw-flex-shrink-0 tw-flex tw-items-center tw-justify-center">
+              <EtherscanIcon />
+            </div>
+          </button>
+          {!isTouchScreen && (
+            <Tooltip
+              id={`etherscan-tooltip-${address.wallet}`}
+              place="top"
+              positionStrategy="fixed"
+              offset={8}
+              opacity={1}
+              style={TOOLTIP_STYLES}
+            />
+          )}
+          <button
+            onClick={goToOpensea}
+            aria-label="Go to Opensea"
+            className="tw-border-none tw-bg-transparent tw-p-1.5 lg:tw-p-0 tw-cursor-pointer tw-text-iron-500 hover:tw-text-iron-200 tw-transition tw-duration-300 tw-ease-out"
+            data-tooltip-id={`opensea-tooltip-${address.wallet}`}
+            {...(isTouchScreen ? null : { "data-tooltip-content": "Opensea" })}
+          >
+            <div className="tw-h-5 tw-w-5 lg:tw-h-4 lg:tw-w-4 tw-flex-shrink-0 tw-flex tw-items-center tw-justify-center">
+              <OpenseaIcon />
+            </div>
+          </button>
+          {!isTouchScreen && (
+            <Tooltip
+              id={`opensea-tooltip-${address.wallet}`}
+              place="top"
+              positionStrategy="fixed"
+              offset={8}
+              opacity={1}
+              style={TOOLTIP_STYLES}
+            />
+          )}
+          <button
+            aria-label="Copy address"
+            className="tw-cursor-pointer tw-border-0 tw-bg-transparent tw-p-1.5 lg:tw-p-0 tw-text-iron-600 tw-transition tw-duration-300 tw-ease-out hover:tw-text-iron-200 focus:tw-outline-none"
+            onClick={handleCopy}
+            data-tooltip-id={`copy-tooltip-${address.wallet}`}
+            {...(!isTouchScreen ? { "data-tooltip-content": "Copy" } : null)}
+          >
+            <div className="tw-h-5 tw-w-5 lg:tw-h-4 lg:tw-w-4 tw-flex-shrink-0 tw-flex tw-items-center tw-justify-center [&>svg]:tw-w-full [&>svg]:tw-h-full">
+              <CopyIcon />
+            </div>
+          </button>
+          {!isTouchScreen && (
+            <Tooltip
+              id={`copy-tooltip-${address.wallet}`}
+              place="top"
+              positionStrategy="fixed"
+              offset={8}
+              opacity={1}
+              style={TOOLTIP_STYLES}
+            />
+          )}
         </div>
       </div>
       {statusMessage && (
-        <div className="pt-3 d-flex flex-column gap-1 tw-text-sm tw-font-medium tw-text-iron-200 sm:tw-text-md">
+        <div className="tw-pt-2 tw-text-xs tw-font-medium tw-text-iron-200">
           {statusMessage}
         </div>
       )}
diff --git a/components/user/identity/statements/consolidated-addresses/UserPageIdentityStatementsConsolidatedAddressesItemPrimary.tsx b/components/user/identity/statements/consolidated-addresses/UserPageIdentityStatementsConsolidatedAddressesItemPrimary.tsx
index 0e6fabec38..e4b994521c 100644
--- a/components/user/identity/statements/consolidated-addresses/UserPageIdentityStatementsConsolidatedAddressesItemPrimary.tsx
+++ b/components/user/identity/statements/consolidated-addresses/UserPageIdentityStatementsConsolidatedAddressesItemPrimary.tsx
@@ -13,7 +13,7 @@ export default function UserPageIdentityStatementsConsolidatedAddressesItemPrima
 }) {
   if (isPrimary) {
     return (
-      <span className="tw-ml-1 tw-text-xs tw-font-bold tw-text-iron-500">
+      <span className="tw-text-[9px] tw-font-semibold tw-text-emerald-400 tw-bg-emerald-900/20 tw-px-1.5 tw-py-px tw-rounded tw-border tw-border-solid tw-border-emerald-500/20">
         Primary
       </span>
     );
@@ -24,7 +24,7 @@ export default function UserPageIdentityStatementsConsolidatedAddressesItemPrima
       <button
         disabled={isAssigningPrimary}
         onClick={assignPrimary}
-        className="tw-bg-transparent tw-whitespace-nowrap tw-border-none tw-ml-1 tw-text-xs tw-font-bold tw-text-iron-500 hover:tw-text-primary-400 tw-transition tw-duration-300 tw-ease-out"
+        className="tw-bg-transparent tw-whitespace-nowrap tw-border-none tw-ml-1 tw-text-xs tw-font-medium tw-text-iron-300 hover:tw-text-primary-400 tw-transition tw-duration-300 tw-ease-out"
       >
         {isAssigningPrimary ? <CircleLoader /> : <>Set Primary</>}
       </button>
diff --git a/components/user/identity/statements/contacts/UserPageIdentityStatementsContacts.tsx b/components/user/identity/statements/contacts/UserPageIdentityStatementsContacts.tsx
index 18f2fce7bd..727e27f43e 100644
--- a/components/user/identity/statements/contacts/UserPageIdentityStatementsContacts.tsx
+++ b/components/user/identity/statements/contacts/UserPageIdentityStatementsContacts.tsx
@@ -1,6 +1,6 @@
 import type { CicStatement } from "@/entities/IProfile";
-import UserPageIdentityStatementsStatementsList from "../utils/UserPageIdentityStatementsStatementsList";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import UserPageIdentityStatementsStatementsList from "../utils/UserPageIdentityStatementsStatementsList";
 
 export default function UserPageIdentityStatementsContacts({
   statements,
@@ -13,31 +13,9 @@ export default function UserPageIdentityStatementsContacts({
 }) {
   return (
     <div>
-      <div className="tw-flex tw-items-center tw-space-x-4">
-        <div className="tw-flex tw-h-9 tw-w-9 tw-items-center tw-justify-center tw-rounded-lg tw-bg-iron-950 tw-border tw-border-solid tw-border-iron-800">
-          <div className="tw-flex tw-items-center tw-justify-center tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-100">
-            <svg
-              className="tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-100"
-              viewBox="0 0 24 24"
-              fill="none"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M7 8.5H12M7 12H15M9.68375 18H16.2C17.8802 18 18.7202 18 19.362 17.673C19.9265 17.3854 20.3854 16.9265 20.673 16.362C21 15.7202 21 14.8802 21 13.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V20.3355C3 20.8684 3 21.1348 3.10923 21.2716C3.20422 21.3906 3.34827 21.4599 3.50054 21.4597C3.67563 21.4595 3.88367 21.2931 4.29976 20.9602L6.68521 19.0518C7.17252 18.662 7.41617 18.4671 7.68749 18.3285C7.9282 18.2055 8.18443 18.1156 8.44921 18.0613C8.74767 18 9.0597 18 9.68375 18Z"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </div>
-        </div>
-        <span className="tw-text-base tw-font-semibold tw-text-iron-100">
-          Contact
-        </span>
-      </div>
-      <div className="tw-mt-3 tw-h-px tw-bg-white/5 tw-w-full"></div>
+      <span className="tw-text-xs tw-font-semibold tw-uppercase tw-tracking-wider tw-text-iron-500">
+        Contact
+      </span>
       <UserPageIdentityStatementsStatementsList
         statements={statements}
         profile={profile}
diff --git a/components/user/identity/statements/header/UserPageIdentityAddStatementsHeader.tsx b/components/user/identity/statements/header/UserPageIdentityAddStatementsHeader.tsx
index 0c9b385803..29a3049407 100644
--- a/components/user/identity/statements/header/UserPageIdentityAddStatementsHeader.tsx
+++ b/components/user/identity/statements/header/UserPageIdentityAddStatementsHeader.tsx
@@ -44,11 +44,13 @@ export default function UserPageIdentityAddStatementsHeader({
 
   return (
     <div>
-      <div className="tw-h-full tw-flex tw-flex-wrap tw-items-center tw-justify-between tw-gap-x-3 tw-gap-y-2 tw-w-full">
-        <h3 className="tw-mb-0 tw-text-lg tw-font-semibold tw-text-iron-100">
-          <span>{possessionName}</span> ID Statements
+      <div className="tw-hidden lg:tw-flex tw-items-center tw-justify-between tw-gap-x-3 tw-w-full">
+        <h3 className="tw-mb-0 tw-text-xl tw-font-semibold tw-text-iron-100">
+          {possessionName} ID Statements
         </h3>
-        {canEdit && <UserPageIdentityStatementsAddButton profile={profile} />}
+        {canEdit && (
+          <UserPageIdentityStatementsAddButton profile={profile} />
+        )}
       </div>
     </div>
   );
diff --git a/components/user/identity/statements/nft-accounts/UserPageIdentityStatementsNFTAccounts.tsx b/components/user/identity/statements/nft-accounts/UserPageIdentityStatementsNFTAccounts.tsx
index bee2ba3998..d00be0bbab 100644
--- a/components/user/identity/statements/nft-accounts/UserPageIdentityStatementsNFTAccounts.tsx
+++ b/components/user/identity/statements/nft-accounts/UserPageIdentityStatementsNFTAccounts.tsx
@@ -1,6 +1,6 @@
 import type { CicStatement } from "@/entities/IProfile";
-import UserPageIdentityStatementsStatementsList from "../utils/UserPageIdentityStatementsStatementsList";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import UserPageIdentityStatementsStatementsList from "../utils/UserPageIdentityStatementsStatementsList";
 
 export default function UserPageIdentityStatementsNFTAccounts({
   statements,
@@ -13,31 +13,9 @@ export default function UserPageIdentityStatementsNFTAccounts({
 }) {
   return (
     <div>
-      <div className="tw-flex tw-items-center tw-space-x-4">
-        <div className="tw-flex tw-h-9 tw-w-9 tw-items-center tw-justify-center tw-rounded-lg tw-bg-iron-950 tw-border tw-border-solid tw-border-iron-800">
-          <div className="tw-flex tw-items-center tw-justify-center tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-100">
-            <svg
-              className="tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-100"
-              viewBox="0 0 24 24"
-              fill="none"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M16 5L18 7L22 3M22 12V17.2C22 18.8802 22 19.7202 21.673 20.362C21.3854 20.9265 20.9265 21.3854 20.362 21.673C19.7202 22 18.8802 22 17.2 22H6.8C5.11984 22 4.27976 22 3.63803 21.673C3.07354 21.3854 2.6146 20.9265 2.32698 20.362C2 19.7202 2 18.8802 2 17.2V6.8C2 5.11984 2 4.27976 2.32698 3.63803C2.6146 3.07354 3.07354 2.6146 3.63803 2.32698C4.27976 2 5.11984 2 6.8 2H12M2.14551 19.9263C2.61465 18.2386 4.16256 17 5.99977 17H12.9998C13.9291 17 14.3937 17 14.7801 17.0769C16.3669 17.3925 17.6073 18.6329 17.9229 20.2196C17.9998 20.606 17.9998 21.0707 17.9998 22M14 9.5C14 11.7091 12.2091 13.5 10 13.5C7.79086 13.5 6 11.7091 6 9.5C6 7.29086 7.79086 5.5 10 5.5C12.2091 5.5 14 7.29086 14 9.5Z"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </div>
-        </div>
-        <span className="tw-text-base tw-font-semibold tw-text-iron-100">
-          NFT Accounts
-        </span>
-      </div>
-      <div className="tw-mt-3 tw-h-px tw-bg-white/5 tw-w-full"></div>
+      <span className="tw-text-xs tw-font-semibold tw-uppercase tw-tracking-wider tw-text-iron-500">
+        NFT Accounts
+      </span>
       <UserPageIdentityStatementsStatementsList
         statements={statements}
         profile={profile}
diff --git a/components/user/identity/statements/social-media-accounts/UserPageIdentityStatementsSocialMediaAccounts.tsx b/components/user/identity/statements/social-media-accounts/UserPageIdentityStatementsSocialMediaAccounts.tsx
index c092eef473..9c94b984d3 100644
--- a/components/user/identity/statements/social-media-accounts/UserPageIdentityStatementsSocialMediaAccounts.tsx
+++ b/components/user/identity/statements/social-media-accounts/UserPageIdentityStatementsSocialMediaAccounts.tsx
@@ -1,6 +1,6 @@
 import type { CicStatement } from "@/entities/IProfile";
-import UserPageIdentityStatementsStatementsList from "../utils/UserPageIdentityStatementsStatementsList";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import UserPageIdentityStatementsStatementsList from "../utils/UserPageIdentityStatementsStatementsList";
 
 export default function UserPageIdentityStatementsSocialMediaAccounts({
   statements,
@@ -13,31 +13,9 @@ export default function UserPageIdentityStatementsSocialMediaAccounts({
 }) {
   return (
     <div>
-      <div className="tw-flex tw-items-center tw-space-x-4">
-        <div className="tw-flex tw-h-9 tw-w-9 tw-items-center tw-justify-center tw-rounded-lg tw-bg-iron-950 tw-border tw-border-solid tw-border-iron-800">
-          <div className="tw-flex tw-items-center tw-justify-center tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-100">
-            <svg
-              className="tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-100"
-              viewBox="0 0 24 24"
-              fill="none"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M16 3.46776C17.4817 4.20411 18.5 5.73314 18.5 7.5C18.5 9.26686 17.4817 10.7959 16 11.5322M18 16.7664C19.5115 17.4503 20.8725 18.565 22 20M2 20C3.94649 17.5226 6.58918 16 9.5 16C12.4108 16 15.0535 17.5226 17 20M14 7.5C14 9.98528 11.9853 12 9.5 12C7.01472 12 5 9.98528 5 7.5C5 5.01472 7.01472 3 9.5 3C11.9853 3 14 5.01472 14 7.5Z"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </div>
-        </div>
-        <span className="tw-text-base tw-font-semibold tw-text-iron-100">
-          Social Media Accounts
-        </span>
-      </div>
-      <div className="tw-mt-3 tw-h-px tw-bg-white/5 tw-w-full"></div>
+      <span className="tw-text-xs tw-font-semibold tw-uppercase tw-tracking-wider tw-text-iron-500">
+        Social Media Accounts
+      </span>
       <UserPageIdentityStatementsStatementsList
         statements={statements}
         profile={profile}
diff --git a/components/user/identity/statements/social-media-verification-posts/UserPageIdentityStatementsSocialMediaVerificationPosts.tsx b/components/user/identity/statements/social-media-verification-posts/UserPageIdentityStatementsSocialMediaVerificationPosts.tsx
index 6df42bf4a8..5ba9fc1f29 100644
--- a/components/user/identity/statements/social-media-verification-posts/UserPageIdentityStatementsSocialMediaVerificationPosts.tsx
+++ b/components/user/identity/statements/social-media-verification-posts/UserPageIdentityStatementsSocialMediaVerificationPosts.tsx
@@ -1,6 +1,6 @@
 import type { CicStatement } from "@/entities/IProfile";
-import UserPageIdentityStatementsStatementsList from "../utils/UserPageIdentityStatementsStatementsList";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import UserPageIdentityStatementsStatementsList from "../utils/UserPageIdentityStatementsStatementsList";
 
 export default function UserPageIdentityStatementsSocialMediaVerificationPosts({
   statements,
@@ -13,29 +13,9 @@ export default function UserPageIdentityStatementsSocialMediaVerificationPosts({
 }) {
   return (
     <div>
-      <div className="tw-flex tw-items-center tw-space-x-4">
-        <div className="tw-flex tw-h-9 tw-w-9 tw-items-center tw-justify-center tw-rounded-lg tw-bg-iron-950 tw-border tw-border-solid tw-border-iron-800">
-          <svg
-            className="tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-100"
-            viewBox="0 0 24 24"
-            fill="none"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M11 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H15.2C16.8802 21 17.7202 21 18.362 20.673C18.9265 20.3854 19.3854 19.9265 19.673 19.362C20 18.7202 20 17.8802 20 16.2V13M13 17H7M15 13H7M20.1213 3.87868C21.2929 5.05025 21.2929 6.94975 20.1213 8.12132C18.9497 9.29289 17.0503 9.29289 15.8787 8.12132C14.7071 6.94975 14.7071 5.05025 15.8787 3.87868C17.0503 2.70711 18.9497 2.70711 20.1213 3.87868Z"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </div>
-        <span className="tw-text-base tw-font-semibold tw-text-iron-100">
-          Social Media Verification Posts
-        </span>
-      </div>
-      <div className="tw-mt-3 tw-h-px tw-bg-white/5 tw-w-full"></div>
+      <span className="tw-text-xs tw-font-semibold tw-uppercase tw-tracking-wider tw-text-iron-500">
+        Social Media Verification Posts
+      </span>
       <UserPageIdentityStatementsStatementsList
         statements={statements}
         profile={profile}
diff --git a/components/user/identity/statements/utils/UserPageIdentityDeleteStatementButton.tsx b/components/user/identity/statements/utils/UserPageIdentityDeleteStatementButton.tsx
index eeaff2621a..8da3c3e730 100644
--- a/components/user/identity/statements/utils/UserPageIdentityDeleteStatementButton.tsx
+++ b/components/user/identity/statements/utils/UserPageIdentityDeleteStatementButton.tsx
@@ -4,6 +4,7 @@ import CommonAnimationOpacity from "@/components/utils/animation/CommonAnimation
 import CommonAnimationWrapper from "@/components/utils/animation/CommonAnimationWrapper";
 import type { CicStatement } from "@/entities/IProfile";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import { TOOLTIP_STYLES } from "@/helpers/tooltip.helpers";
 import { useEffect, useState } from "react";
 import { Tooltip } from "react-tooltip";
 import UserPageIdentityDeleteStatementModal from "./UserPageIdentityDeleteStatementModal";
@@ -58,11 +59,9 @@ export default function UserPageIdentityDeleteStatementButton({
           id={tooltipId}
           place="top"
           positionStrategy="fixed"
-          style={{
-            backgroundColor: "#1F2937",
-            color: "white",
-            padding: "4px 8px",
-          }}
+          offset={8}
+          opacity={1}
+          style={TOOLTIP_STYLES}
         >
           <span className="tw-text-xs">Delete</span>
         </Tooltip>
diff --git a/components/user/identity/statements/utils/UserPageIdentityStatementsStatement.tsx b/components/user/identity/statements/utils/UserPageIdentityStatementsStatement.tsx
index 45af0dcfc8..43709fbb76 100644
--- a/components/user/identity/statements/utils/UserPageIdentityStatementsStatement.tsx
+++ b/components/user/identity/statements/utils/UserPageIdentityStatementsStatement.tsx
@@ -5,6 +5,7 @@ import CopyIcon from "@/components/utils/icons/CopyIcon";
 import OutsideLinkIcon from "@/components/utils/icons/OutsideLinkIcon";
 import type { CicStatement } from "@/entities/IProfile";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import { TOOLTIP_STYLES } from "@/helpers/tooltip.helpers";
 import { STATEMENT_META } from "@/helpers/Types";
 import { useEffect, useState } from "react";
 import { Tooltip } from "react-tooltip";
@@ -38,89 +39,77 @@ export default function UserPageIdentityStatementsStatement({
   }, []);
 
   return (
-    <li className="tw-group hover:tw-bg-white/[0.02] tw-rounded-lg tw-px-2 tw-py-2 md:tw-py-1 tw-transition-colors tw-duration-200 tw-ease-out tw-border-b tw-border-white/[0.04] md:tw-border-b-0 last:tw-border-b-0">
-      <div className="tw-flex tw-flex-col">
-        <div className="tw-flex tw-items-center tw-justify-between tw-w-full">
-          <div className="tw-flex tw-items-center tw-gap-x-3">
-            <div className="tw-flex-shrink-0 tw-w-[18px] tw-h-[18px] md:tw-w-[20px] md:tw-h-[20px] group-hover:tw-scale-105 tw-transition-transform tw-duration-150 tw-ease-out">
-              <SocialStatementIcon statementType={statement.statement_type} />
-            </div>
-            <span className="tw-text-sm md:tw-text-base tw-font-medium tw-text-iron-200 group-hover:tw-text-iron-100 tw-transition-colors tw-duration-150 tw-ease-out">
+    <li className="tw-group hover:tw-bg-white/[0.02] tw-pl-0.5 tw-py-4 tw-transition-colors tw-duration-200 tw-ease-out tw-border-b tw-border-solid tw-border-white/[0.06] tw-border-t-0 tw-border-x-0 last:tw-border-b-0">
+      <div className="tw-flex tw-items-center tw-justify-between tw-gap-3">
+        <div className="tw-flex tw-items-center tw-gap-3.5 tw-min-w-0">
+          <div className="tw-flex-shrink-0 tw-w-5 tw-h-5 tw-flex tw-items-center tw-justify-center">
+            <SocialStatementIcon statementType={statement.statement_type} />
+          </div>
+          <div className="tw-min-w-0">
+            <div className="tw-text-xs tw-font-semibold tw-text-iron-500 tw-leading-none">
               {STATEMENT_META[statement.statement_type].title}
-            </span>
+            </div>
+            <div className="tw-text-xs tw-font-medium tw-text-iron-100 tw-break-all tw-leading-4 tw-mt-1.5">
+              {title === "Copied!" ? (
+                <span className="tw-text-primary-400">{title}</span>
+              ) : (
+                statement.statement_value
+              )}
+            </div>
           </div>
-
-          <div className="tw-flex tw-items-center tw-gap-2">
-            {canOpen && (
-              <>
-                <a
-                  href={statement.statement_value}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={`${
-                    isTouchScreen
-                      ? "tw-opacity-100"
-                      : "tw-opacity-0 group-hover:tw-opacity-100"
-                  } tw-p-1.5 tw-bg-transparent tw-cursor-pointer tw-text-xs tw-font-semibold tw-text-iron-400 hover:tw-text-iron-200 tw-border-0 focus:tw-outline-none tw-transition tw-duration-300 tw-ease-out`}
-                  data-tooltip-id={`open-statement-${statement.statement_type}`}>
+        </div>
+        <div className="tw-flex tw-items-center tw-gap-3 lg:tw-gap-2 tw-ml-3 tw-flex-shrink-0 tw-leading-none">
+          {canOpen && (
+            <>
+              <a
+                href={statement.statement_value}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="tw-border-none tw-bg-transparent tw-p-1.5 lg:tw-p-0 tw-cursor-pointer tw-text-iron-600 hover:tw-text-iron-200 focus:tw-outline-none tw-transition tw-duration-300 tw-ease-out"
+                data-tooltip-id={`open-statement-${statement.id}`}>
+                <div className="tw-h-5 tw-w-5 lg:tw-h-4 lg:tw-w-4 tw-flex tw-items-center tw-justify-center tw-flex-shrink-0 [&>svg]:tw-w-full [&>svg]:tw-h-full">
                   <OutsideLinkIcon />
-                </a>
-                {!isTouchScreen && (
-                  <Tooltip
-                    id={`open-statement-${statement.statement_type}`}
-                    place="top"
-                    positionStrategy="fixed"
-                    style={{
-                      backgroundColor: "#1F2937",
-                      color: "white",
-                      padding: "4px 8px",
-                    }}>
-                    <span className="tw-text-xs">Open</span>
-                  </Tooltip>
-                )}
-              </>
-            )}
-            <button
-              aria-label="Copy"
-              className={`${
-                isTouchScreen
-                  ? "tw-opacity-100"
-                  : "tw-opacity-0 group-hover:tw-opacity-100"
-              } tw-p-1.5 tw-bg-transparent tw-cursor-pointer tw-text-xs tw-font-semibold tw-text-iron-400 hover:tw-text-iron-200 tw-border-0 focus:tw-outline-none tw-transition tw-duration-300 tw-ease-out`}
-              onClick={handleCopy}
-              data-tooltip-id={`copy-statement-${statement.statement_type}`}>
+                </div>
+              </a>
+              {!isTouchScreen && (
+                <Tooltip
+                  id={`open-statement-${statement.id}`}
+                  place="top"
+                  positionStrategy="fixed"
+                  offset={8}
+                  opacity={1}
+                  style={TOOLTIP_STYLES}>
+                  <span className="tw-text-xs">Open</span>
+                </Tooltip>
+              )}
+            </>
+          )}
+          <button
+            aria-label="Copy"
+            className="tw-cursor-pointer tw-border-0 tw-bg-transparent tw-p-1.5 lg:tw-p-0 tw-text-iron-600 tw-transition tw-duration-300 tw-ease-out hover:tw-text-iron-200 focus:tw-outline-none"
+            onClick={handleCopy}
+            data-tooltip-id={`copy-statement-${statement.id}`}>
+            <div className="tw-h-5 tw-w-5 lg:tw-h-4 lg:tw-w-4 tw-flex tw-items-center tw-justify-center tw-flex-shrink-0 [&>svg]:tw-w-full [&>svg]:tw-h-full">
               <CopyIcon />
-            </button>
-            {!isTouchScreen && (
-              <Tooltip
-                id={`copy-statement-${statement.statement_type}`}
-                place="top"
-                positionStrategy="fixed"
-                style={{
-                  backgroundColor: "#1F2937",
-                  color: "white",
-                  padding: "4px 8px",
-                }}>
-                <span className="tw-text-xs">Copy</span>
-              </Tooltip>
-            )}
-            {canEdit && (
-              <UserPageIdentityDeleteStatementButton
-                statement={statement}
-                profile={profile}
-              />
-            )}
-          </div>
-        </div>
-
-        <div className="tw-ml-7">
-          <span className="tw-text-sm tw-text-iron-200 tw-break-all tw-tracking-wide group-hover:tw-text-iron-100 tw-cursor-text tw-select-all tw-transition-colors tw-duration-150 tw-ease-out">
-            {title === "Copied!" ? (
-              <span className="tw-text-primary-400">{title}</span>
-            ) : (
-              statement.statement_value
-            )}
-          </span>
+            </div>
+          </button>
+          {!isTouchScreen && (
+            <Tooltip
+              id={`copy-statement-${statement.id}`}
+              place="top"
+              positionStrategy="fixed"
+              offset={8}
+              opacity={1}
+              style={TOOLTIP_STYLES}>
+              <span className="tw-text-xs">Copy</span>
+            </Tooltip>
+          )}
+          {canEdit && (
+            <UserPageIdentityDeleteStatementButton
+              statement={statement}
+              profile={profile}
+            />
+          )}
         </div>
       </div>
     </li>
diff --git a/components/user/identity/statements/utils/UserPageIdentityStatementsStatementsList.tsx b/components/user/identity/statements/utils/UserPageIdentityStatementsStatementsList.tsx
index 1d8b571d14..2bbbb34f3a 100644
--- a/components/user/identity/statements/utils/UserPageIdentityStatementsStatementsList.tsx
+++ b/components/user/identity/statements/utils/UserPageIdentityStatementsStatementsList.tsx
@@ -41,7 +41,7 @@ export default function UserPageIdentityStatementsStatementsList({
   }
 
   return (
-    <ul className="tw-mb-0 tw-mt-3 md:tw-mt-4 tw-list-none tw-space-y-2 md:tw-space-y-4 tw-inline-flex tw-flex-col tw-w-full tw-pl-0 tw-text-base tw-leading-7 tw-text-iron-300">
+    <ul className="tw-mb-0 tw-mt-2 tw-list-none tw-space-y-0 tw-inline-flex tw-flex-col tw-w-full tw-pl-0 tw-text-base tw-text-iron-300">
       {statements.map((statement) => (
         <UserPageIdentityStatementsStatement
           key={statement.id}
@@ -52,7 +52,7 @@ export default function UserPageIdentityStatementsStatementsList({
       ))}
 
       {!statements.length && (
-        <span className="tw-text-sm sm:tw-text-md tw-italic tw-text-iron-400">
+        <span className="tw-text-xs tw-font-normal tw-text-iron-500">
           {noItemsMessage}
         </span>
       )}
diff --git a/components/user/layout/userTabs.config.ts b/components/user/layout/userTabs.config.ts
index ca3ed690e7..397369a9c8 100644
--- a/components/user/layout/userTabs.config.ts
+++ b/components/user/layout/userTabs.config.ts
@@ -24,15 +24,10 @@ const TAB_DEFINITIONS = [
   },
   {
     id: "rep",
-    title: "Rep",
-    route: "rep",
-  },
-  {
-    id: "identity",
     title: "Identity",
     route: "identity",
   },
-  {
+{
     id: "collected",
     title: "Collected",
     route: "collected",
diff --git a/components/user/rep/UserPageCombinedActivityLog.tsx b/components/user/rep/UserPageCombinedActivityLog.tsx
new file mode 100644
index 0000000000..bc2f7243f7
--- /dev/null
+++ b/components/user/rep/UserPageCombinedActivityLog.tsx
@@ -0,0 +1,47 @@
+import type { ActivityLogParams } from "@/components/profile-activity/ProfileActivityLogs";
+import ProfileActivityLogs from "@/components/profile-activity/ProfileActivityLogs";
+import type { RateMatter } from "@/types/enums";
+
+export default function UserPageCombinedActivityLog({
+  initialActivityLogParams,
+  matter,
+  withMatterFilter = true,
+}: {
+  readonly initialActivityLogParams: ActivityLogParams;
+  readonly matter?: RateMatter | null;
+  readonly withMatterFilter?: boolean;
+}) {
+  const params: ActivityLogParams =
+    matter === undefined
+      ? initialActivityLogParams
+      : { ...initialActivityLogParams, matter };
+
+  return (
+    <div>
+      <ProfileActivityLogs
+        initialParams={params}
+        withFilters={true}
+        withMatterFilter={withMatterFilter}
+      >
+        <h3 className="tw-mb-0 tw-flex tw-items-center tw-gap-1.5 lg:tw-gap-2 tw-whitespace-nowrap tw-text-xs tw-uppercase tw-tracking-wider tw-text-iron-100 lg:tw-text-xl lg:tw-normal-case lg:tw-tracking-normal tw-font-semibold">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+            className="tw-h-3.5 tw-w-3.5 lg:tw-h-5 lg:tw-w-5 tw-flex-shrink-0 tw-text-iron-500"
+          >
+            <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" />
+          </svg>
+          Activity Log
+        </h3>
+      </ProfileActivityLogs>
+    </div>
+  );
+}
diff --git a/components/user/rep/UserPageRep.helpers.ts b/components/user/rep/UserPageRep.helpers.ts
new file mode 100644
index 0000000000..0d4aa7ec64
--- /dev/null
+++ b/components/user/rep/UserPageRep.helpers.ts
@@ -0,0 +1,42 @@
+import type { RatingStats } from "@/entities/IProfile";
+import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import type { ApiProfileProxy } from "@/generated/models/ApiProfileProxy";
+import { ApiProfileProxyActionType } from "@/generated/models/ApiProfileProxyActionType";
+
+export function sortRepsByRatingAndContributors(items: RatingStats[]) {
+  return [...items].sort((a, d) => {
+    if (a.rating === d.rating) {
+      return d.contributor_count - a.contributor_count;
+    }
+    return d.rating - a.rating;
+  });
+}
+
+export function getCanEditRep({
+  myProfile,
+  targetProfile,
+  activeProfileProxy,
+}: {
+  readonly myProfile: ApiIdentity | null;
+  readonly targetProfile: ApiIdentity;
+  readonly activeProfileProxy: ApiProfileProxy | null;
+}) {
+  if (!myProfile?.handle) {
+    return false;
+  }
+
+  if (activeProfileProxy) {
+    if (targetProfile.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;
+}
diff --git a/components/user/rep/UserPageRep.tsx b/components/user/rep/UserPageRep.tsx
index b49c951a50..617ccb9eed 100644
--- a/components/user/rep/UserPageRep.tsx
+++ b/components/user/rep/UserPageRep.tsx
@@ -10,22 +10,20 @@ import { RateMatter } from "@/types/enums";
 import { useQuery } from "@tanstack/react-query";
 import { useParams } from "next/navigation";
 import { useContext, useEffect, useState } from "react";
+import UserPageIdentityHeader from "../identity/header/UserPageIdentityHeader";
+import UserPageIdentityHeaderCICRate from "../identity/header/cic-rate/UserPageIdentityHeaderCICRate";
+import UserPageIdentityStatements from "../identity/statements/UserPageIdentityStatements";
 import UserPageRateWrapper from "../utils/rate/UserPageRateWrapper";
-import type { ProfileRatersParams } from "../utils/raters-table/wrapper/ProfileRatersTableWrapper";
-import ProfileRatersTableWrapper from "../utils/raters-table/wrapper/ProfileRatersTableWrapper";
+
+import UserPageCombinedActivityLog from "./UserPageCombinedActivityLog";
 import UserPageRepHeader from "./header/UserPageRepHeader";
-import UserPageRepNewRep from "./new-rep/UserPageRepNewRep";
+import UserPageRepMobile from "./UserPageRepMobile";
 import UserPageRepReps from "./reps/UserPageRepReps";
-import UserPageRepActivityLog from "./UserPageRepActivityLog";
 export default function UserPageRep({
   profile,
-  initialRepReceivedParams,
-  initialRepGivenParams,
   initialActivityLogParams,
 }: {
   readonly profile: ApiIdentity;
-  readonly initialRepReceivedParams: ProfileRatersParams;
-  readonly initialRepGivenParams: ProfileRatersParams;
   readonly initialActivityLogParams: ActivityLogParams;
 }) {
   const { connectedProfile } = useContext(AuthContext);
@@ -54,25 +52,82 @@ export default function UserPageRep({
 
   return (
     <div className="tailwind-scope">
-      <UserPageRepHeader repRates={repRates ?? null} />
-      <UserPageRateWrapper profile={profile} type={RateMatter.REP}>
-        <UserPageRepNewRep profile={profile} repRates={repRates ?? null} />
-      </UserPageRateWrapper>
-      <UserPageRepReps repRates={repRates ?? null} profile={profile} />
+      {/* Mobile layout (<1024px) */}
+      <UserPageRepMobile
+        profile={profile}
+        repRates={repRates ?? null}
+        initialActivityLogParams={initialActivityLogParams}
+      />
 
-      <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} />
+      {/* Desktop layout (>=1024px) */}
+      <div className="tw-hidden lg:tw-block">
+        <div className="tw-grid tw-grid-cols-1 tw-gap-x-8 lg:tw-grid-cols-[minmax(0,2fr)_minmax(22rem,1fr)] xl:tw-gap-x-10">
+          {/* 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 */}
+          <div className="tw-min-w-0 tw-self-start">
+            <div className="tw-relative tw-overflow-hidden tw-rounded-2xl tw-border tw-border-solid tw-border-white/[0.08] tw-bg-[#08090b]">
+              <div className="tw-pointer-events-none tw-absolute tw-inset-0 tw-bg-gradient-to-br tw-from-emerald-500/[0.05] tw-via-transparent tw-to-transparent" />
+              <div className="tw-absolute tw-left-0 tw-right-0 tw-top-0 tw-h-px tw-bg-gradient-to-r tw-from-transparent tw-via-emerald-400/25 tw-to-transparent" />
+              <div className="tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-h-px tw-bg-gradient-to-r tw-from-transparent tw-via-emerald-400/40 tw-to-transparent" />
+              <div className="tw-absolute tw-bottom-0 tw-left-0 tw-top-0 tw-w-px tw-bg-gradient-to-b tw-from-transparent tw-via-emerald-400/20 tw-to-transparent" />
+              <div className="tw-absolute tw-bottom-0 tw-right-0 tw-top-0 tw-w-px tw-bg-gradient-to-b tw-from-transparent tw-via-emerald-400/20 tw-to-transparent" />
+              <div className="tw-relative tw-z-10">
+                <UserPageIdentityHeader profile={profile} />
+                <UserPageIdentityStatements profile={profile} />
+                <div className="tw-px-6 tw-pb-8">
+                  <UserPageRateWrapper
+                    profile={profile}
+                    type={RateMatter.NIC}
+                    hideOwnProfileMessage
+                  >
+                    <UserPageIdentityHeaderCICRate
+                      profile={profile}
+                      isTooltip={false}
+                    />
+                  </UserPageRateWrapper>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
 
-      <div className="tw-mt-6 lg:tw-mt-8">
-        <UserPageRepActivityLog
-          initialActivityLogParams={initialActivityLogParams}
-        />
+        {/* 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/UserPageRepActivityLog.tsx b/components/user/rep/UserPageRepActivityLog.tsx
deleted file mode 100644
index 47d885cd8a..0000000000
--- a/components/user/rep/UserPageRepActivityLog.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type {
-  ActivityLogParams,
-} from "@/components/profile-activity/ProfileActivityLogs";
-import ProfileActivityLogs from "@/components/profile-activity/ProfileActivityLogs";
-import ProfileName, {
-  ProfileNameType,
-} from "@/components/profile-activity/ProfileName";
-import UserTableHeaderWrapper from "../utils/UserTableHeaderWrapper";
-
-export default function UserPageRepActivityLog({
-  initialActivityLogParams,
-}: {
-  readonly initialActivityLogParams: ActivityLogParams;
-}) {
-  return (
-    <div>
-      <UserTableHeaderWrapper>
-        <span>
-          <ProfileName type={ProfileNameType.POSSESSION} />
-        </span>{" "}
-        Rep Activity Log
-      </UserTableHeaderWrapper>
-      <div className="tw-mt-2 lg:tw-mt-4">
-        <div className="tw-bg-iron-950 tw-border tw-border-iron-800 tw-border-solid tw-rounded-xl">
-          <ProfileActivityLogs
-            initialParams={initialActivityLogParams}
-            withFilters={false}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/components/user/rep/UserPageRepMobile.tsx b/components/user/rep/UserPageRepMobile.tsx
new file mode 100644
index 0000000000..907b25c5ee
--- /dev/null
+++ b/components/user/rep/UserPageRepMobile.tsx
@@ -0,0 +1,436 @@
+"use client";
+
+import { AuthContext } from "@/components/auth/Auth";
+import { useSeizeConnectContext } from "@/components/auth/SeizeConnectContext";
+import MobileWrapperDialog from "@/components/mobile-wrapper-dialog/MobileWrapperDialog";
+import { QueryKey } from "@/components/react-query-wrapper/ReactQueryWrapper";
+import type { ActivityLogParams } from "@/components/profile-activity/ProfileActivityLogs";
+import type {
+  ApiProfileRepRatesState,
+  RatingWithProfileInfoAndLevel,
+} from "@/entities/IProfile";
+import { SortDirection } from "@/entities/ISort";
+import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import { ApiProfileProxyActionType } from "@/generated/models/ApiProfileProxyActionType";
+import { amIUser, formatNumberWithCommas } from "@/helpers/Helpers";
+import type { Page } from "@/helpers/Types";
+import { commonApiFetch } from "@/services/api/common-api";
+import { ProfileRatersParamsOrderBy, RateMatter } from "@/types/enums";
+import { useQuery } from "@tanstack/react-query";
+import { AnimatePresence, motion } from "framer-motion";
+import { useContext, useEffect, useMemo, useState } from "react";
+import UserPageIdentityHeaderCICRate from "../identity/header/cic-rate/UserPageIdentityHeaderCICRate";
+import UserPageIdentityStatementsAddButton from "../identity/statements/add/UserPageIdentityStatementsAddButton";
+import UserPageIdentityStatements from "../identity/statements/UserPageIdentityStatements";
+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 UserPageCombinedActivityLog from "./UserPageCombinedActivityLog";
+import {
+  getCanEditRep,
+  sortRepsByRatingAndContributors,
+} from "./UserPageRep.helpers";
+
+type MobileTab = "rep" | "identity";
+
+export default function UserPageRepMobile({
+  profile,
+  repRates,
+  initialActivityLogParams,
+}: {
+  readonly profile: ApiIdentity;
+  readonly repRates: ApiProfileRepRatesState | null;
+  readonly initialActivityLogParams: ActivityLogParams;
+}) {
+  const { connectedProfile, activeProfileProxy } = useContext(AuthContext);
+  const { address } = useSeizeConnectContext();
+  const profileHandle = profile.handle ?? "";
+
+  const [activeTab, setActiveTab] = useState<MobileTab>("rep");
+  const [isGrantRepOpen, setIsGrantRepOpen] = useState(false);
+  const [isNicRateOpen, setIsNicRateOpen] = useState(false);
+
+  const { data: nicRatings } = useQuery<Page<RatingWithProfileInfoAndLevel>>({
+    queryKey: [
+      QueryKey.PROFILE_RATERS,
+      {
+        handleOrWallet: profileHandle,
+        matter: RateMatter.NIC,
+        page: 1,
+        pageSize: 1,
+        order: SortDirection.DESC,
+        orderBy: ProfileRatersParamsOrderBy.RATING,
+        given: false,
+      },
+    ],
+    queryFn: async () =>
+      await commonApiFetch<Page<RatingWithProfileInfoAndLevel>>({
+        endpoint: `profiles/${profileHandle}/cic/ratings/by-rater`,
+        params: {
+          page: `${1}`,
+          page_size: `${1}`,
+          order: SortDirection.DESC.toLowerCase(),
+          order_by: ProfileRatersParamsOrderBy.RATING.toLowerCase(),
+          given: "false",
+        },
+      }),
+    enabled: !!profileHandle,
+  });
+
+  // Close modals when viewport reaches lg breakpoint
+  useEffect(() => {
+    const mq = globalThis.matchMedia("(min-width: 1024px)");
+    const handler = (e: MediaQueryListEvent) => {
+      if (e.matches) {
+        setIsGrantRepOpen(false);
+        setIsNicRateOpen(false);
+      }
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+
+  // --- derived: sorted reps, can-edit flags ---
+  const reps = useMemo(
+    () => sortRepsByRatingAndContributors(repRates?.rating_stats ?? []),
+    [repRates?.rating_stats]
+  );
+
+  const canEditRep = useMemo(
+    () =>
+      getCanEditRep({
+        myProfile: connectedProfile,
+        targetProfile: profile,
+        activeProfileProxy,
+      }),
+    [connectedProfile, profile, activeProfileProxy]
+  );
+
+  const canEditNic = useMemo((): boolean => {
+    if (!connectedProfile?.handle) return false;
+    if (activeProfileProxy) {
+      if (profile.handle === activeProfileProxy.created_by.handle) return false;
+      return activeProfileProxy.actions.some(
+        (action) => action.action_type === ApiProfileProxyActionType.AllocateCic
+      );
+    }
+    if (amIUser({ profile, address })) return false;
+    return true;
+  }, [connectedProfile, profile, activeProfileProxy, address]);
+
+  const canEditStatements =
+    !activeProfileProxy &&
+    !!profile?.handle &&
+    (profile.wallets ?? []).some(
+      (w) => w.wallet.toLowerCase() === address?.toLowerCase()
+    );
+
+  // --- render ---
+
+  return (
+    <div className="lg:tw-hidden">
+      {/* Score Cards (tappable navigation) */}
+      <div className="tw-grid tw-grid-cols-2 tw-gap-3">
+        {/* Rep Score */}
+        <button
+          type="button"
+          onClick={() => setActiveTab("rep")}
+          className={`tw-relative tw-cursor-pointer tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-white/[0.08] tw-p-4 tw-text-left tw-transition-all tw-duration-300 tw-ease-out ${
+            activeTab === "rep" ? "tw-bg-[#0f1014]" : "tw-bg-white/[0.02]"
+          }`}
+        >
+          <div
+            aria-hidden="true"
+            className="tw-pointer-events-none tw-absolute tw-right-3 tw-top-3 tw-z-10"
+          >
+            <span
+              className={`tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-solid tw-transition-all tw-duration-300 ${
+                activeTab === "rep"
+                  ? "tw-border-primary-300/90 tw-bg-transparent tw-ring-2 tw-ring-primary-500/25"
+                  : "tw-border-iron-400/45 tw-bg-black/10 tw-ring-1 tw-ring-black/20"
+              }`}
+            >
+              {activeTab === "rep" && (
+                <span className="tw-h-1.5 tw-w-1.5 tw-rounded-full tw-bg-primary-300 tw-transition-all tw-duration-300" />
+              )}
+            </span>
+          </div>
+          {activeTab === "rep" && (
+            <>
+              <div className="tw-pointer-events-none tw-absolute tw-inset-0 tw-bg-gradient-to-br tw-from-blue-500/[0.05] tw-via-transparent tw-to-transparent" />
+              <div className="tw-pointer-events-none tw-absolute tw-left-0 tw-right-0 tw-top-0 tw-h-px tw-bg-gradient-to-r tw-from-transparent tw-via-iron-300/25 tw-to-transparent" />
+              <div className="tw-pointer-events-none tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-h-px tw-bg-gradient-to-r tw-from-transparent tw-via-blue-400/40 tw-to-transparent" />
+              <div className="tw-pointer-events-none tw-absolute tw-bottom-0 tw-left-0 tw-top-0 tw-w-px tw-bg-gradient-to-b tw-from-transparent tw-via-blue-400/20 tw-to-transparent" />
+              <div className="tw-pointer-events-none tw-absolute tw-bottom-0 tw-right-0 tw-top-0 tw-w-px tw-bg-gradient-to-b tw-from-transparent tw-via-blue-400/20 tw-to-transparent" />
+            </>
+          )}
+          <div
+            className={`tw-relative tw-transition-opacity tw-duration-300 ${activeTab === "rep" ? "" : "tw-opacity-40"}`}
+          >
+            <div className="tw-mb-1.5 tw-text-[0.6875rem] tw-font-semibold tw-uppercase tw-leading-4 tw-tracking-wider tw-text-iron-500">
+              Total Rep
+            </div>
+            <div className="tw-text-2xl tw-font-semibold tw-leading-none tw-tracking-tight tw-text-primary-400">
+              {repRates
+                ? formatNumberWithCommas(repRates.total_rep_rating)
+                : "\u2014"}
+            </div>
+            {repRates && (
+              <div className="tw-mt-2.5 tw-flex tw-items-center">
+                <span className="tw-text-xs tw-font-normal tw-text-iron-400">
+                  {formatNumberWithCommas(repRates.number_of_raters)}{" "}
+                  {repRates.number_of_raters === 1 ? "rater" : "raters"}
+                </span>
+              </div>
+            )}
+          </div>
+        </button>
+
+        {/* NIC Score */}
+        <button
+          type="button"
+          onClick={() => setActiveTab("identity")}
+          className={`tw-relative tw-cursor-pointer tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-white/[0.08] tw-p-4 tw-text-left tw-transition-all tw-duration-300 tw-ease-out ${
+            activeTab === "identity" ? "tw-bg-[#0f1014]" : "tw-bg-white/[0.02]"
+          }`}
+        >
+          <div
+            aria-hidden="true"
+            className="tw-pointer-events-none tw-absolute tw-right-3 tw-top-3 tw-z-10"
+          >
+            <span
+              className={`tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-solid tw-transition-all tw-duration-300 ${
+                activeTab === "identity"
+                  ? "tw-border-emerald-300/90 tw-bg-transparent tw-ring-2 tw-ring-emerald-500/25"
+                  : "tw-border-iron-400/45 tw-bg-black/10 tw-ring-1 tw-ring-black/20"
+              }`}
+            >
+              {activeTab === "identity" && (
+                <span className="tw-h-1.5 tw-w-1.5 tw-rounded-full tw-bg-emerald-300 tw-transition-all tw-duration-300" />
+              )}
+            </span>
+          </div>
+          {activeTab === "identity" && (
+            <>
+              <div className="tw-pointer-events-none tw-absolute tw-inset-0 tw-bg-gradient-to-br tw-from-emerald-500/[0.05] tw-via-transparent tw-to-transparent" />
+              <div className="tw-pointer-events-none tw-absolute tw-left-0 tw-right-0 tw-top-0 tw-h-px tw-bg-gradient-to-r tw-from-transparent tw-via-iron-300/25 tw-to-transparent" />
+              <div className="tw-pointer-events-none tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-h-px tw-bg-gradient-to-r tw-from-transparent tw-via-emerald-400/40 tw-to-transparent" />
+              <div className="tw-pointer-events-none tw-absolute tw-bottom-0 tw-left-0 tw-top-0 tw-w-px tw-bg-gradient-to-b tw-from-transparent tw-via-emerald-400/20 tw-to-transparent" />
+              <div className="tw-pointer-events-none tw-absolute tw-bottom-0 tw-right-0 tw-top-0 tw-w-px tw-bg-gradient-to-b tw-from-transparent tw-via-emerald-400/20 tw-to-transparent" />
+            </>
+          )}
+          <div
+            className={`tw-relative tw-transition-opacity tw-duration-300 ${activeTab === "identity" ? "" : "tw-opacity-40"}`}
+          >
+            <div className="tw-mb-1.5 tw-text-[0.6875rem] tw-font-semibold tw-uppercase tw-leading-4 tw-tracking-wider tw-text-iron-500">
+              NIC
+            </div>
+            <div className="tw-text-2xl tw-font-semibold tw-leading-none tw-tracking-tight tw-text-white">
+              {formatNumberWithCommas(profile.cic)}
+            </div>
+            <div className="tw-mt-2.5 tw-flex tw-items-center tw-gap-1.5">
+              <span className="tw-h-4 tw-w-4 tw-flex-shrink-0">
+                <UserCICTypeIcon cic={profile.cic} />
+              </span>
+              <span className="tw-text-xs tw-font-semibold tw-uppercase tw-text-emerald-400">
+                <UserCICStatus cic={profile.cic} />
+              </span>
+            </div>
+            <div className="tw-mt-2 tw-flex tw-items-center tw-gap-2">
+              <div className="tw-pointer-events-none">
+                <TopRaterAvatars
+                  handleOrWallet={profile.handle ?? ""}
+                  matter={RateMatter.NIC}
+                  count={3}
+                  size="sm"
+                  withLinks={false}
+                />
+              </div>
+              <span className="tw-text-xs tw-font-normal tw-text-iron-400">
+                {formatNumberWithCommas(nicRatings?.count ?? 0)}{" "}
+                {(nicRatings?.count ?? 0) === 1 ? "rater" : "raters"}
+              </span>
+            </div>
+          </div>
+        </button>
+      </div>
+
+      {/* Tab Content */}
+      <AnimatePresence mode="wait">
+        {activeTab === "rep" ? (
+          <motion.div
+            key="rep"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.15, ease: "easeInOut" }}
+          >
+            {canEditRep && (
+              <div className="tw-mt-4">
+                <UserPageRateWrapper
+                  profile={profile}
+                  type={RateMatter.REP}
+                  hideOwnProfileMessage
+                >
+                  <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
+                    </span>
+                    <button
+                      onClick={() => setIsGrantRepOpen(true)}
+                      className="tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-justify-center tw-gap-1.5 tw-rounded-lg tw-border tw-border-solid tw-border-primary-500 tw-bg-primary-500 tw-px-3.5 tw-py-2 tw-text-sm tw-font-semibold tw-text-white tw-shadow-lg tw-shadow-blue-500/20 tw-transition tw-duration-300 tw-ease-out hover:tw-border-primary-600 hover:tw-bg-primary-600 md:tw-py-3"
+                    >
+                      <svg
+                        className="-tw-ml-1 tw-h-4 tw-w-4 tw-flex-shrink-0"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        aria-hidden="true"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path d="M12 5v14M5 12h14" />
+                      </svg>
+                      Grant Rep
+                    </button>
+                  </div>
+                </UserPageRateWrapper>
+              </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}
+                matter={RateMatter.REP}
+                withMatterFilter={false}
+              />
+            </div>
+          </motion.div>
+        ) : (
+          <motion.div
+            key="identity"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.15, ease: "easeInOut" }}
+          >
+            {/* Rate NIC CTA */}
+            {canEditNic && (
+              <div className="tw-mt-4">
+                <UserPageRateWrapper
+                  profile={profile}
+                  type={RateMatter.NIC}
+                  hideOwnProfileMessage
+                >
+                  <div className="tw-flex tw-items-center tw-justify-between tw-rounded-xl tw-border tw-border-solid tw-border-emerald-500/10 tw-bg-emerald-500/5 tw-px-5 tw-py-3">
+                    <span className="tw-text-xs tw-font-medium tw-text-emerald-200/70">
+                      Verify this identity
+                    </span>
+                    <button
+                      onClick={() => setIsNicRateOpen(true)}
+                      className="tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-justify-center tw-gap-2 tw-rounded-lg tw-border tw-border-solid tw-border-emerald-500 tw-bg-emerald-500 tw-px-3.5 tw-py-2 tw-text-sm tw-font-semibold tw-text-white tw-shadow-lg tw-shadow-emerald-500/20 tw-transition tw-duration-300 tw-ease-out hover:tw-border-emerald-400 hover:tw-bg-emerald-400 sm:tw-py-3"
+                    >
+                      Rate NIC
+                    </button>
+                  </div>
+                </UserPageRateWrapper>
+              </div>
+            )}
+
+            {/* Identity Statements */}
+            <div className="tw-mt-6 tw-flex tw-items-center tw-justify-between">
+              <h3 className="tw-mb-0 tw-text-xs tw-font-semibold tw-uppercase tw-tracking-wider tw-text-iron-100">
+                ID Statements
+              </h3>
+              {canEditStatements && (
+                <UserPageIdentityStatementsAddButton profile={profile} />
+              )}
+            </div>
+            <div className="tw-mt-3 tw-rounded-xl tw-border tw-border-solid tw-border-white/[0.08] tw-bg-[#0f1014]">
+              <UserPageIdentityStatements profile={profile} />
+            </div>
+
+            <div className="tw-mt-6">
+              <UserPageCombinedActivityLog
+                initialActivityLogParams={initialActivityLogParams}
+                matter={RateMatter.NIC}
+                withMatterFilter={false}
+              />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Grant Rep Bottom Sheet */}
+      <MobileWrapperDialog
+        title="Grant Rep"
+        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
+        title="Rate NIC"
+        isOpen={isNicRateOpen}
+        onClose={() => setIsNicRateOpen(false)}
+        tabletModal
+      >
+        <div className="tw-px-4 sm:tw-px-6">
+          <UserPageRateWrapper profile={profile} type={RateMatter.NIC}>
+            <UserPageIdentityHeaderCICRate
+              profile={profile}
+              isTooltip={false}
+              onSuccess={() => setIsNicRateOpen(false)}
+            />
+          </UserPageRateWrapper>
+          <div className="tw-mt-3">
+            <button
+              onClick={() => setIsNicRateOpen(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>
+    </div>
+  );
+}
diff --git a/components/user/rep/UserPageRepWrapper.tsx b/components/user/rep/UserPageRepWrapper.tsx
index a65863b6bc..792ec1923c 100644
--- a/components/user/rep/UserPageRepWrapper.tsx
+++ b/components/user/rep/UserPageRepWrapper.tsx
@@ -4,18 +4,13 @@ import type { ApiIdentity } from "@/generated/models/ApiIdentity";
 import { useIdentity } from "@/hooks/useIdentity";
 import { useParams } from "next/navigation";
 import type { ActivityLogParams } from "@/components/profile-activity/ProfileActivityLogs";
-import type { ProfileRatersParams } from "../utils/raters-table/wrapper/ProfileRatersTableWrapper";
 import UserPageSetUpProfileWrapper from "../utils/set-up-profile/UserPageSetUpProfileWrapper";
 import UserPageRep from "./UserPageRep";
 export default function UserPageRepWrapper({
   profile: initialProfile,
-  initialRepReceivedParams,
-  initialRepGivenParams,
   initialActivityLogParams,
 }: {
   readonly profile: ApiIdentity;
-  readonly initialRepReceivedParams: ProfileRatersParams;
-  readonly initialRepGivenParams: ProfileRatersParams;
   readonly initialActivityLogParams: ActivityLogParams;
 }) {
   const params = useParams();
@@ -30,8 +25,6 @@ export default function UserPageRepWrapper({
     <UserPageSetUpProfileWrapper profile={profile ?? initialProfile}>
       <UserPageRep
         profile={profile ?? initialProfile}
-        initialRepReceivedParams={initialRepReceivedParams}
-        initialRepGivenParams={initialRepGivenParams}
         initialActivityLogParams={initialActivityLogParams}
       />
     </UserPageSetUpProfileWrapper>
diff --git a/components/user/rep/header/TopRaterAvatars.tsx b/components/user/rep/header/TopRaterAvatars.tsx
new file mode 100644
index 0000000000..c28e746371
--- /dev/null
+++ b/components/user/rep/header/TopRaterAvatars.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { useQuery, useQueries } from "@tanstack/react-query";
+import { QueryKey } from "@/components/react-query-wrapper/ReactQueryWrapper";
+import { commonApiFetch } from "@/services/api/common-api";
+import type { RatingWithProfileInfoAndLevel } from "@/entities/IProfile";
+import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import type { Page } from "@/helpers/Types";
+import OverlappingAvatars from "@/components/common/OverlappingAvatars";
+import { RateMatter } from "@/types/enums";
+import type { MouseEvent } from "react";
+
+const STALE_TIME = 5 * 60 * 1000;
+
+export default function TopRaterAvatars({
+  handleOrWallet,
+  category,
+  matter = RateMatter.REP,
+  withLinks = true,
+  onAvatarClick,
+  count = 5,
+  size = "sm",
+}: {
+  readonly handleOrWallet: string;
+  readonly category?: string;
+  readonly matter?: RateMatter.REP | RateMatter.NIC;
+  readonly withLinks?: boolean;
+  readonly onAvatarClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+  readonly count?: number;
+  readonly size?: "sm" | "md";
+}) {
+  const params: Record<string, string> = {
+    page: "1",
+    page_size: `${count}`,
+    order: "desc",
+    order_by: "rating",
+    given: "false",
+  };
+  if (matter === RateMatter.REP && category) {
+    params["category"] = category;
+  }
+
+  const ratingsEndpoint =
+    matter === RateMatter.NIC
+      ? `profiles/${handleOrWallet}/cic/ratings/by-rater`
+      : `profiles/${handleOrWallet}/rep/ratings/by-rater`;
+
+  const { data: ratersPage } = useQuery<Page<RatingWithProfileInfoAndLevel>>({
+    queryKey: [
+      QueryKey.PROFILE_RATERS,
+      {
+        handleOrWallet: handleOrWallet.toLowerCase(),
+        matter,
+        category,
+        count,
+      },
+    ],
+    queryFn: async () =>
+      await commonApiFetch<Page<RatingWithProfileInfoAndLevel>>({
+        endpoint: ratingsEndpoint,
+        params,
+      }),
+    enabled: !!handleOrWallet,
+    staleTime: STALE_TIME,
+  });
+
+  const raterHandles = ratersPage?.data.map((r) => r.handle) ?? [];
+
+  const identityQueries = useQueries({
+    queries: raterHandles.map((handle) => ({
+      queryKey: [QueryKey.PROFILE, handle.toLowerCase()],
+      queryFn: async () =>
+        await commonApiFetch<ApiIdentity>({
+          endpoint: `identities/${handle.toLowerCase()}`,
+        }),
+      enabled: !!handle,
+      staleTime: STALE_TIME,
+    })),
+  });
+
+  const items = identityQueries
+    .filter((q) => q.data)
+    .map((q) => {
+      const identity = q.data!;
+      const target = identity.handle ?? identity.primary_wallet;
+      return {
+        key: target,
+        pfpUrl: identity.pfp ?? null,
+        ...(withLinks && target ? { href: `/${target}` } : {}),
+        ariaLabel: target,
+        fallback: identity.handle
+          ? identity.handle.charAt(0).toUpperCase()
+          : "?",
+        title: target,
+      };
+    });
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <OverlappingAvatars
+      items={items}
+      size={size}
+      maxCount={count}
+      onItemClick={(e) => onAvatarClick?.(e)}
+    />
+  );
+}
diff --git a/components/user/rep/header/UserPageRepHeader.tsx b/components/user/rep/header/UserPageRepHeader.tsx
index 9ba43e4f16..29996b1dc4 100644
--- a/components/user/rep/header/UserPageRepHeader.tsx
+++ b/components/user/rep/header/UserPageRepHeader.tsx
@@ -1,37 +1,171 @@
-import type { ApiProfileRepRatesState } from "@/entities/IProfile";
+"use client";
+
+import { AuthContext } from "@/components/auth/Auth";
+import type { ApiProfileRepRatesState, RatingStats } from "@/entities/IProfile";
+import type { ApiIdentity } from "@/generated/models/ApiIdentity";
 import { formatNumberWithCommas } from "@/helpers/Helpers";
+import { useContext, useEffect, useState } from "react";
+import UserPageRepModifyModal from "../modify-rep/UserPageRepModifyModal";
+import TopRaterAvatars from "./TopRaterAvatars";
+import {
+  getCanEditRep,
+  sortRepsByRatingAndContributors,
+} from "../UserPageRep.helpers";
+
+const TOP_REPS_COUNT = 4;
 
 export default function UserPageRepHeader({
   repRates,
+  profile,
 }: {
   readonly repRates: ApiProfileRepRatesState | null;
+  readonly profile: ApiIdentity;
 }) {
+  const { connectedProfile, activeProfileProxy } = useContext(AuthContext);
+
+  const [topReps, setTopReps] = useState<RatingStats[]>(
+    sortRepsByRatingAndContributors(repRates?.rating_stats ?? []).slice(
+      0,
+      TOP_REPS_COUNT
+    )
+  );
+
+  useEffect(() => {
+    setTopReps(
+      sortRepsByRatingAndContributors(repRates?.rating_stats ?? []).slice(
+        0,
+        TOP_REPS_COUNT
+      )
+    );
+  }, [repRates?.rating_stats]);
+
+  const [canEditRep, setCanEditRep] = useState<boolean>(
+    getCanEditRep({
+      myProfile: connectedProfile,
+      targetProfile: profile,
+      activeProfileProxy,
+    })
+  );
+
+  useEffect(() => {
+    setCanEditRep(
+      getCanEditRep({
+        myProfile: connectedProfile,
+        targetProfile: profile,
+        activeProfileProxy,
+      })
+    );
+  }, [connectedProfile, profile, activeProfileProxy]);
+
+  const [editCategory, setEditCategory] = useState<string | null>(null);
+
+  const openEditCategory = (category: string) => {
+    if (!canEditRep) {
+      return;
+    }
+    setEditCategory(category);
+  };
+
   return (
-    <div>
-      <div className="tw-mt-6 lg:tw-mt-8 tw-mb-4 lg:tw-flex lg:tw-items-center tw-lg:justify-between">
-        <div className="tw-min-w-0 tw-flex-1">
-          <div className="tw-flex tw-flex-col sm:tw-flex-row sm:tw-flex-wrap sm:tw-space-x-6 tw-gap-y-1">
-            <div className="tw-flex tw-items-center tw-text-base tw-font-medium tw-text-iron-300">
-              <div className="tw-flex tw-items-center tw-space-x-1">
-                <span>Rep:</span>
-                <span className="tw-text-iron-50 tw-font-semibold">
-                  {repRates
-                    ? formatNumberWithCommas(repRates.total_rep_rating)
-                    : ""}
-                </span>
-              </div>
+    <>
+      <div className="tw-relative tw-overflow-hidden tw-rounded-2xl tw-border tw-border-solid tw-border-white/[0.08] tw-bg-gradient-to-br tw-from-[#0f1014] tw-via-[#0A0A0C] tw-to-[#08090b] tw-shadow-2xl">
+        <div className="tw-pointer-events-none tw-absolute tw-inset-0 tw-bg-gradient-to-br tw-from-blue-500/[0.05] tw-via-transparent tw-to-transparent tw-opacity-100" />
+        <div className="tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-h-[1px] tw-bg-gradient-to-r tw-from-transparent tw-via-blue-400/40 tw-to-transparent" />
+        <div className="tw-absolute tw-bottom-0 tw-left-0 tw-top-0 tw-w-[1px] tw-bg-gradient-to-b tw-from-transparent tw-via-blue-400/20 tw-to-transparent" />
+        <div className="tw-absolute tw-bottom-0 tw-right-0 tw-top-0 tw-w-[1px] tw-bg-gradient-to-b tw-from-transparent tw-via-blue-400/20 tw-to-transparent" />
+
+        <div className="tw-relative tw-p-6">
+          <div className="tw-flex tw-items-start tw-justify-between tw-gap-6">
+            <div className="tw-min-w-0">
+              <h2 className="tw-mb-1 tw-text-xl tw-font-semibold tw-text-iron-100">
+                Rep
+              </h2>
+              <p className="tw-mb-0 tw-text-sm tw-font-normal tw-leading-relaxed tw-text-iron-500">
+                What others recognize this identity for.
+              </p>
             </div>
-            <div className="tw-flex tw-items-center tw-text-base tw-font-medium tw-text-iron-300 tw-space-x-1">
-              <span>Raters:</span>
-              <span className="tw-text-iron-50 tw-font-semibold">
+
+            <div className="tw-flex tw-flex-shrink-0 tw-flex-col tw-items-end tw-text-right">
+              <div className="tw-mb-1 tw-text-xs tw-font-semibold tw-uppercase tw-tracking-wider tw-text-iron-500">
+                Total Rep
+              </div>
+              <div className="tw-text-3xl tw-font-semibold tw-leading-none tw-tracking-tight tw-text-primary-400">
                 {repRates
-                  ? formatNumberWithCommas(repRates.number_of_raters)
+                  ? formatNumberWithCommas(repRates.total_rep_rating)
                   : ""}
-              </span>
+              </div>
+              {repRates && (
+                <span className="tw-mt-1 tw-text-sm tw-font-normal tw-text-iron-400">
+                  {formatNumberWithCommas(repRates.number_of_raters)}{" "}
+                  {repRates.number_of_raters === 1 ? "rater" : "raters"}
+                </span>
+              )}
             </div>
           </div>
+
+          {topReps.length > 0 && (
+            <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
+              </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={() => 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={3}
+                    />
+                    <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>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
       </div>
-    </div>
+
+      {canEditRep && editCategory && (
+        <UserPageRepModifyModal
+          profile={profile}
+          category={editCategory}
+          onClose={() => setEditCategory(null)}
+        />
+      )}
+    </>
   );
 }
diff --git a/components/user/rep/modify-rep/UserPageRepModifyModal.tsx b/components/user/rep/modify-rep/UserPageRepModifyModal.tsx
index 3775b76810..99a33d35c4 100644
--- a/components/user/rep/modify-rep/UserPageRepModifyModal.tsx
+++ b/components/user/rep/modify-rep/UserPageRepModifyModal.tsx
@@ -2,29 +2,20 @@
 
 import { AuthContext } from "@/components/auth/Auth";
 import CircleLoader from "@/components/distribution-plan-tool/common/CircleLoader";
-import {
-    QueryKey,
-    ReactQueryWrapperContext,
-} from "@/components/react-query-wrapper/ReactQueryWrapper";
+import { ReactQueryWrapperContext } from "@/components/react-query-wrapper/ReactQueryWrapper";
 import UserRateAdjustmentHelper from "@/components/user/utils/rate/UserRateAdjustmentHelper";
-import type {
-    ApiProfileRepRatesState,
-    RatingStats,
-} from "@/entities/IProfile";
+import UserPageRateInput from "@/components/user/utils/rate/UserPageRateInput";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
-import { ApiProfileProxyActionType } from "@/generated/models/ApiProfileProxyActionType";
 import { getStringAsNumberOrZero } from "@/helpers/Helpers";
-import {
-    commonApiFetch,
-    commonApiPost,
-} from "@/services/api/common-api";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { commonApiPost } from "@/services/api/common-api";
+import { useMutation } from "@tanstack/react-query";
 import { useContext, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { motion } from "framer-motion";
 import { useClickAway, useKeyPressEvent } from "react-use";
 import UserPageRepModifyModalHeader from "./UserPageRepModifyModalHeader";
 import UserPageRepModifyModalRaterStats from "./UserPageRepModifyModalRaterStats";
+import { useRepAllocation } from "@/hooks/useRepAllocation";
 interface ApiAddRepRatingToProfileRequest {
   readonly amount: number;
   readonly category: string;
@@ -43,173 +34,18 @@ export default function UserPageRepModifyModal({
   const { requestAuth, setToast, connectedProfile, activeProfileProxy } =
     useContext(AuthContext);
 
-  const { data: proxyGrantorRepRates } = useQuery<ApiProfileRepRatesState>({
-    queryKey: [
-      QueryKey.PROFILE_REP_RATINGS,
-      {
-        rater: activeProfileProxy?.created_by.handle,
-        handleOrWallet: profile?.handle,
-      },
-    ],
-    queryFn: async () =>
-      await commonApiFetch<ApiProfileRepRatesState>({
-        endpoint: `profiles/${profile?.query}/rep/ratings/received`,
-        params: activeProfileProxy?.created_by.handle
-          ? { rater: activeProfileProxy.created_by.handle }
-          : {},
-      }),
-    enabled: !!activeProfileProxy?.created_by.handle,
+  const { repState, heroAvailableRep, minMaxValues } = useRepAllocation({
+    profile,
+    category,
   });
 
-  const { data: connectedProfileRepRates } = useQuery<ApiProfileRepRatesState>({
-    queryKey: [
-      QueryKey.PROFILE_REP_RATINGS,
-      {
-        rater: connectedProfile?.handle,
-        handleOrWallet: profile?.handle,
-      },
-    ],
-    queryFn: async () =>
-      await commonApiFetch<ApiProfileRepRatesState>({
-        endpoint: `profiles/${profile?.query}/rep/ratings/received`,
-        params: connectedProfile?.handle
-          ? { rater: connectedProfile?.handle }
-          : {},
-      }),
-    enabled: !!connectedProfile?.handle,
-  });
-
-  const getProxyAvailableCredit = (): number | null => {
-    const repProxy = activeProfileProxy?.actions.find(
-      (a) => a.action_type === ApiProfileProxyActionType.AllocateRep
-    );
-    if (!repProxy) {
-      return null;
-    }
-    return Math.max(
-      (repProxy.credit_amount ?? 0) - (repProxy.credit_spent ?? 0),
-      0
-    );
-  };
-
-  const [proxyAvailableCredit, setProxyAvailableCredit] = useState<
-    number | null
-  >(getProxyAvailableCredit());
-
-  useEffect(
-    () => setProxyAvailableCredit(getProxyAvailableCredit()),
-    [activeProfileProxy]
-  );
-
-  const getRepState = (): RatingStats | null => {
-    if (activeProfileProxy && proxyGrantorRepRates) {
-      const target = proxyGrantorRepRates.rating_stats.find(
-        (s) => s.category === category
-      );
-      return (
-        target ?? {
-          category,
-          rating: 0,
-          contributor_count: 0,
-          rater_contribution: 0,
-        }
-      );
-    }
-
-    if (activeProfileProxy) {
-      return null;
-    }
-
-    if (connectedProfileRepRates) {
-      const target = connectedProfileRepRates.rating_stats.find(
-        (s) => s.category === category
-      );
-      return (
-        target ?? {
-          category,
-          rating: 0,
-          contributor_count: 0,
-          rater_contribution: 0,
-        }
-      );
-    }
-
-    return null;
-  };
-
-  const [repState, setRepState] = useState<RatingStats | null>(getRepState());
   const [adjustedRatingStr, setAdjustedRatingStr] = useState<string>(
-    `${getRepState()?.rater_contribution ?? 0}`
-  );
-
-  const getHeroAvailableRep = (): number => {
-    if (activeProfileProxy) {
-      return proxyGrantorRepRates?.rep_rates_left_for_rater ?? 0;
-    }
-    return connectedProfileRepRates?.rep_rates_left_for_rater ?? 0;
-  };
-
-  const [heroAvailableRep, setHeroAvailableRep] = useState<number>(
-    getHeroAvailableRep()
+    `${repState?.rater_contribution ?? 0}`
   );
 
-  useEffect(
-    () => setHeroAvailableRep(getHeroAvailableRep()),
-    [activeProfileProxy, proxyGrantorRepRates, connectedProfileRepRates]
-  );
-
-  const getMinValue = (): number => {
-    const currentRep = repState?.rater_contribution ?? 0;
-    const minHeroRep = 0 - (Math.abs(currentRep) + heroAvailableRep);
-    if (typeof proxyAvailableCredit !== "number") {
-      return minHeroRep;
-    }
-    const minProxyRep = currentRep - proxyAvailableCredit;
-
-    return Math.abs(minHeroRep) < Math.abs(minProxyRep)
-      ? minHeroRep
-      : minProxyRep;
-  };
-
-  const getMaxValue = (): number => {
-    const currentRep = repState?.rater_contribution ?? 0;
-    const maxHeroRep = Math.abs(currentRep) + heroAvailableRep;
-    if (typeof proxyAvailableCredit !== "number") {
-      return maxHeroRep;
-    }
-    const maxProxyRep = currentRep + proxyAvailableCredit;
-
-    return Math.min(maxHeroRep, maxProxyRep);
-  };
-
-  const getMinMaxValues = (): {
-    readonly min: number;
-    readonly max: number;
-  } => ({
-    min: getMinValue(),
-    max: getMaxValue(),
-  });
-
-  const [minMaxValues, setMinMaxValues] = useState<{
-    readonly min: number;
-    readonly max: number;
-  }>(getMinMaxValues());
-
   useEffect(() => {
-    const newState = getRepState();
-    setRepState(newState);
-    setAdjustedRatingStr(`${newState?.rater_contribution ?? 0}`);
-  }, [
-    proxyGrantorRepRates,
-    activeProfileProxy,
-    connectedProfileRepRates,
-    heroAvailableRep,
-  ]);
-
-  useEffect(
-    () => setMinMaxValues(getMinMaxValues()),
-    [repState, proxyGrantorRepRates, proxyAvailableCredit]
-  );
+    setAdjustedRatingStr(`${repState?.rater_contribution ?? 0}`);
+  }, [repState]);
 
   const inputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
@@ -249,58 +85,10 @@ export default function UserPageRepModifyModal({
     };
   }, []);
 
-  const getValueStr = (value: string): string => {
-    if (value.length > 1 && value.startsWith("0")) {
-      return value.slice(1);
-    }
-
-    return value;
-  };
-
-  const adjustStrValueToMinMax = (): void => {
-    if (activeProfileProxy) {
-      return;
-    }
-    const { min, max } = minMaxValues;
-    const valueAsNumber = getStringAsNumberOrZero(adjustedRatingStr);
-    if (valueAsNumber > max) {
-      setAdjustedRatingStr(`${max}`);
-      return;
-    }
-
-    if (valueAsNumber < min) {
-      setAdjustedRatingStr(`${min}`);
-    }
-  };
-
-  const onValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const inputValue = event.currentTarget.value;
-    const strCIC = ["-0", "0-"].includes(inputValue) ? "-" : inputValue;
-    if (/^-?\d*$/.test(strCIC)) {
-      const newCicValue = getValueStr(strCIC);
-      setAdjustedRatingStr(newCicValue);
-    }
-  };
-
-  const getIsValidValue = (): boolean => {
-    if (activeProfileProxy) {
-      return true;
-    }
-    const { min, max } = minMaxValues;
-    const valueAsNumber = getStringAsNumberOrZero(adjustedRatingStr);
-    if (valueAsNumber > max) {
-      return false;
-    }
-
-    if (valueAsNumber < min) {
-      return false;
-    }
-    return true;
-  };
-
-  const [isValidValue, setIsValidValue] = useState<boolean>(getIsValidValue());
-
-  useEffect(() => setIsValidValue(getIsValidValue()), [adjustedRatingStr]);
+  const adjustedValueNum = getStringAsNumberOrZero(adjustedRatingStr);
+  const isValidValue =
+    !!activeProfileProxy ||
+    (adjustedValueNum >= minMaxValues.min && adjustedValueNum <= minMaxValues.max);
 
   const [newRating, setNewRating] = useState<number>(
     getStringAsNumberOrZero(adjustedRatingStr)
@@ -441,49 +229,13 @@ export default function UserPageRepModifyModal({
                 Your total Rep for {category}:
               </label>
               <div className="tw-relative tw-flex tw-mt-1.5">
-                <span className="tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-iron-900 tw-rounded-l-lg tw-border tw-border-solid tw-border-iron-700 tw-px-3">
-                  <svg
-                    className="tw-w-3.5 tw-h-3.5 tw-flex-shrink-0 tw-text-iron-500"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    aria-hidden="true"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path
-                      d="M12 5V19M5 12H19"
-                      stroke="currentColor"
-                      strokeWidth="3"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
-                  <svg
-                    className="tw-w-3.5 tw-h-3.5 tw-flex-shrink-0 tw-text-iron-500"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    aria-hidden="true"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path
-                      d="M5 12H19"
-                      stroke="currentColor"
-                      strokeWidth="3"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
-                </span>
-                <input
-                  ref={inputRef}
-                  type="text"
-                  required
-                  autoComplete="off"
+                <UserPageRateInput
                   value={adjustedRatingStr}
-                  onChange={onValueChange}
-                  onBlur={adjustStrValueToMinMax}
-                  className={`${
-                    isValidValue
-                      ? "focus:tw-ring-primary-400"
-                      : "focus:tw-ring-red"
-                  } tw-appearance-none -tw-ml-0.5 tw-block tw-w-full tw-rounded-l-none tw-rounded-r-lg tw-border-0 tw-py-3 tw-px-3 tw-bg-iron-900 focus:tw-bg-iron-950 tw-text-iron-300 tw-font-medium tw-caret-primary-400 tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-iron-700 hover:tw-ring-iron-600 placeholder:tw-text-iron-500 focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-inset tw-text-base tw-transition tw-duration-300 tw-ease-out`}
+                  onChange={setAdjustedRatingStr}
+                  minMax={minMaxValues}
+                  isProxy={!!activeProfileProxy}
+                  inputRef={inputRef}
+                  required
                 />
               </div>
               <UserRateAdjustmentHelper
diff --git a/components/user/rep/modify-rep/UserPageRepModifyModalHeader.tsx b/components/user/rep/modify-rep/UserPageRepModifyModalHeader.tsx
index 7a90174690..69a825d782 100644
--- a/components/user/rep/modify-rep/UserPageRepModifyModalHeader.tsx
+++ b/components/user/rep/modify-rep/UserPageRepModifyModalHeader.tsx
@@ -37,7 +37,7 @@ export default function UserPageRepModifyModalHeader({
             </svg>
           </span>
         </div>
-        <p className="tw-mt-3 sm:tw-mt-0 tw-pr-8 tw-text-wrap tw-truncate md:tw-max-w-sm tw-text-lg tw-text-iron-50 tw-font-medium tw-mb-0">
+        <p className="tw-mt-3 sm:tw-mt-0 tw-pr-8 tw-text-wrap tw-truncate md:tw-max-w-sm tw-text-lg tw-text-iron-50 tw-font-semibold tw-mb-0">
           Add Rep to {handleOrWallet}
         </p>
       </div>
diff --git a/components/user/rep/new-rep/UserPageRepNewRep.tsx b/components/user/rep/new-rep/UserPageRepNewRep.tsx
index a6ccb74676..b156723a55 100644
--- a/components/user/rep/new-rep/UserPageRepNewRep.tsx
+++ b/components/user/rep/new-rep/UserPageRepNewRep.tsx
@@ -1,68 +1,27 @@
 "use client";
 
-import { useState } from "react";
-import CommonAnimationOpacity from "@/components/utils/animation/CommonAnimationOpacity";
-import UserPageRepModifyModal from "../modify-rep/UserPageRepModifyModal";
 import type {
   ApiProfileRepRatesState,
-  RatingStats,
 } from "@/entities/IProfile";
 import UserPageRepNewRepSearch from "./UserPageRepNewRepSearch";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
-import { AnimatePresence } from "framer-motion";
 
 export default function UserPageRepNewRep({
   profile,
   repRates,
+  onSuccess,
 }: {
   readonly profile: ApiIdentity;
   readonly repRates: ApiProfileRepRatesState | null;
+  readonly onSuccess?: () => void;
 }) {
-  const [isAddNewRepModalOpen, setIsAddNewRepModalOpen] =
-    useState<boolean>(false);
-
-  const [repToAdd, setRepToAdd] = useState<RatingStats | null>(null);
-
-  const onRepSearch = (repSearch: string) => {
-    const rep: RatingStats = repRates?.rating_stats.find(
-      (r) => r.category === repSearch
-    ) ?? {
-      category: repSearch,
-      rating: 0,
-      contributor_count: 0,
-      rater_contribution: 0,
-    };
-    setRepToAdd(rep);
-    setIsAddNewRepModalOpen(true);
-  };
-
-  const onCloseModal = () => {
-    setIsAddNewRepModalOpen(false);
-    setRepToAdd(null);
-  };
+  const searchProps = onSuccess ? { onSuccess } : {};
 
   return (
-    <>
-      <UserPageRepNewRepSearch
-        onRepSearch={onRepSearch}
-        repRates={repRates}
-        profile={profile}
-      />
-      <AnimatePresence mode="sync" initial={true}>
-        {isAddNewRepModalOpen && repToAdd && (
-          <CommonAnimationOpacity
-            key="modal"
-            elementClasses="tw-absolute tw-z-10"
-            elementRole="dialog"
-            onClicked={(e) => e.stopPropagation()}>
-            <UserPageRepModifyModal
-              profile={profile}
-              category={repToAdd.category}
-              onClose={onCloseModal}
-            />
-          </CommonAnimationOpacity>
-        )}
-      </AnimatePresence>
-    </>
+    <UserPageRepNewRepSearch
+      repRates={repRates}
+      profile={profile}
+      {...searchProps}
+    />
   );
 }
diff --git a/components/user/rep/new-rep/UserPageRepNewRepSearch.tsx b/components/user/rep/new-rep/UserPageRepNewRepSearch.tsx
index cafb835eca..d488940fa2 100644
--- a/components/user/rep/new-rep/UserPageRepNewRepSearch.tsx
+++ b/components/user/rep/new-rep/UserPageRepNewRepSearch.tsx
@@ -1,22 +1,46 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
-import { commonApiFetch } from "@/services/api/common-api";
-import { useEffect, useRef, useState } from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { commonApiFetch, commonApiPost } from "@/services/api/common-api";
+import { useContext, useEffect, useRef, useState } from "react";
 import { useClickAway, useDebounce, useKeyPressEvent } from "react-use";
 import { AnimatePresence, motion } from "framer-motion";
 import type { ApiProfileRepRatesState } from "@/entities/IProfile";
-import UserPageRepNewRepSearchHeader from "./UserPageRepNewRepSearchHeader";
 import UserPageRepNewRepSearchDropdown from "./UserPageRepNewRepSearchDropdown";
 import CircleLoader from "@/components/distribution-plan-tool/common/CircleLoader";
 import UserPageRepNewRepError from "./UserPageRepNewRepError";
-import { QueryKey } from "@/components/react-query-wrapper/ReactQueryWrapper";
+import {
+  QueryKey,
+  ReactQueryWrapperContext,
+} from "@/components/react-query-wrapper/ReactQueryWrapper";
+import { AuthContext } from "@/components/auth/Auth";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import { formatNumberWithCommas, getStringAsNumberOrZero } from "@/helpers/Helpers";
+import UserRateAdjustmentHelper from "@/components/user/utils/rate/UserRateAdjustmentHelper";
+import UserPageRateInput from "@/components/user/utils/rate/UserPageRateInput";
+import { useRepAllocation } from "@/hooks/useRepAllocation";
+
 const SEARCH_LENGTH = {
   MIN: 3,
   MAX: 100,
 };
 
+const getErrorMessage = (error: unknown): string => {
+  if (error instanceof Error && error.message.trim()) {
+    return error.message;
+  }
+  if (typeof error === "string" && error.trim()) {
+    return error;
+  }
+  if (typeof error === "object" && error !== null && "message" in error) {
+    const message = (error as { readonly message?: unknown }).message;
+    if (typeof message === "string" && message.trim()) {
+      return message;
+    }
+  }
+  return "Something went wrong.";
+};
+
 export enum RepSearchState {
   MIN_LENGTH_ERROR = "MIN_LENGTH_ERROR",
   MAX_LENGTH_ERROR = "MAX_LENGTH_ERROR",
@@ -26,21 +50,21 @@ export enum RepSearchState {
 
 export default function UserPageRepNewRepSearch({
   repRates,
-  onRepSearch,
   profile,
+  onSuccess,
 }: {
   readonly repRates: ApiProfileRepRatesState | null;
-  readonly onRepSearch: (repSearch: string) => void;
   readonly profile: ApiIdentity;
+  readonly onSuccess?: () => void;
 }) {
-  const [repSearch, setRepSearch] = useState<string>("");
+  const { onProfileRepModify } = useContext(ReactQueryWrapperContext);
+  const { requestAuth, setToast, connectedProfile, activeProfileProxy } =
+    useContext(AuthContext);
 
-  const handleRepSearchChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    const newValue = event.target.value;
-    setRepSearch(newValue);
-  };
+  const [repSearch, setRepSearch] = useState<string>("");
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [amountStr, setAmountStr] = useState<string>("0");
+  const [mutating, setMutating] = useState<boolean>(false);
 
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
 
@@ -78,6 +102,28 @@ export default function UserPageRepNewRepSearch({
     enabled: matchingSearchLength,
   });
 
+  const { repState, heroAvailableRep, minMaxValues } = useRepAllocation({
+    profile,
+    category: selectedCategory,
+  });
+
+  // Pre-fill amountStr when category is selected
+  useEffect(() => {
+    if (repState) {
+      setAmountStr(`${repState.rater_contribution}`);
+    }
+  }, [repState]);
+
+  const amountNum = getStringAsNumberOrZero(amountStr);
+  const isValidValue =
+    !!activeProfileProxy ||
+    (amountNum >= minMaxValues.min && amountNum <= minMaxValues.max);
+
+  const newRating = getStringAsNumberOrZero(amountStr);
+  const haveChanged = newRating !== (repState?.rater_contribution ?? 0);
+
+  // --- End derived rep state ---
+
   const [isOpen, setIsOpen] = useState(false);
 
   const listRef = useRef<HTMLDivElement>(null);
@@ -97,8 +143,8 @@ export default function UserPageRepNewRepSearch({
           param: rep,
         },
       });
-      onRepSearch(rep);
-      setRepSearch("");
+      setSelectedCategory(rep);
+      setRepSearch(rep);
       setErrorMsg(null);
       setIsOpen(false);
     } catch (error: any) {
@@ -108,7 +154,55 @@ export default function UserPageRepNewRepSearch({
     }
   };
 
-  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+  const addRepMutation = useMutation({
+    mutationFn: async ({
+      amount,
+      category,
+    }: {
+      amount: number;
+      category: string;
+    }) =>
+      await commonApiPost<{ amount: number; category: string }, void>({
+        endpoint: `profiles/${profile?.query}/rep/rating`,
+        body: { amount, category },
+      }),
+    onSuccess: () => {
+      setToast({ message: "Rep updated.", type: "success" });
+      onProfileRepModify({
+        targetProfile: profile,
+        connectedProfile,
+        profileProxy: activeProfileProxy ?? null,
+      });
+      setSelectedCategory(null);
+      setRepSearch("");
+      setAmountStr("0");
+      setIsOpen(false);
+      onSuccess?.();
+    },
+    onError: (error) => {
+      setToast({ message: getErrorMessage(error), type: "error" });
+    },
+  });
+
+  const onGrantRep = async () => {
+    if (mutating || !selectedCategory || !amountStr) return;
+    const amount = Number.parseInt(amountStr, 10);
+    if (Number.isNaN(amount)) return;
+    if (!haveChanged) return;
+    setMutating(true);
+    try {
+      const { success } = await requestAuth();
+      if (!success) {
+        setToast({ message: "You must be logged in.", type: "error" });
+        return;
+      }
+      await addRepMutation.mutateAsync({ amount, category: selectedCategory });
+    } finally {
+      setMutating(false);
+    }
+  };
+
+  const onSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (!debouncedValue) return;
     onRepSelect(debouncedValue);
@@ -128,10 +222,10 @@ export default function UserPageRepNewRepSearch({
     }
 
     setCategoriesToDisplay(items);
-    if (debouncedValue.length) {
+    if (debouncedValue.length && repSearch.length && !selectedCategory) {
       setIsOpen(true);
     }
-  }, [debouncedValue, categories, matchingSearchLength]);
+  }, [debouncedValue, repSearch, categories, matchingSearchLength, selectedCategory]);
 
   const [repSearchState, setRepSearchState] = useState<RepSearchState>(
     RepSearchState.MIN_LENGTH_ERROR
@@ -149,73 +243,145 @@ export default function UserPageRepNewRepSearch({
     }
   }, [debouncedValue, isFetching, categories]);
 
+  const handleRepSearchChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const newValue = event.target.value;
+    setRepSearch(newValue);
+    if (selectedCategory && newValue !== selectedCategory) {
+      setSelectedCategory(null);
+      setAmountStr("");
+    }
+  };
+
+  const isGrantDisabled =
+    !selectedCategory || !amountStr || !haveChanged || !isValidValue || mutating;
+
   return (
-    <div className="tw-max-w-full tw-relative tw-bg-iron-950 tw-px-4 tw-py-6 lg:tw-px-8 tw-rounded-xl tw-border tw-border-solid tw-border-iron-800">
-      <div className="tw-w-full tw-flex tw-flex-col lg:tw-flex-row tw-gap-y-8 lg:tw-gap-x-16 lg:tw-justify-between tw-items-start">
-        <div className="tw-w-full lg:tw-w-1/2">
-          <UserPageRepNewRepSearchHeader
-            repRates={repRates}
-            profile={profile}
-          />
-          <div ref={listRef} className="tw-w-full sm:tw-max-w-xs">
-            <div className="tw-w-full tw-mt-6 tw-relative">
-              <form onSubmit={onSubmit} className="tw-w-full sm:tw-max-w-xs">
+    <div className="tw-max-w-full tw-relative">
+      <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-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-block tw-text-sm tw-font-normal tw-text-iron-400">
+                  className="tw-hidden lg:tw-block tw-text-xs tw-font-medium tw-text-iron-500">
                   Grant Rep
                 </label>
-                <div className="tw-w-full tw-relative tw-mt-1.5">
-                  <svg
-                    className="tw-pointer-events-none tw-absolute tw-left-4 tw-top-3.5 tw-h-5 tw-w-5 tw-text-iron-300"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true">
-                    <path
-                      fillRule="evenodd"
-                      d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
-                      clipRule="evenodd"
+                <div className="tw-flex tw-items-center tw-gap-3 tw-text-xs tw-text-iron-500 tw-font-medium">
+                  <span>
+                    <span>Your available Rep:</span>
+                    <span className="tw-ml-1 tw-font-semibold tw-text-iron-300">
+                      {formatNumberWithCommas(heroAvailableRep)}
+                    </span>
+                  </span>
+                  <span className="tw-w-px tw-h-3 tw-bg-white/20" />
+                  <span>
+                    <span>
+                      Your Rep assigned to{" "}
+                      {profile.query ?? profile.handle ?? profile.display}:
+                    </span>
+                    <span className="tw-ml-1 tw-font-semibold tw-text-iron-300">
+                      {formatNumberWithCommas(
+                        repRates?.total_rep_rating_by_rater ?? 0
+                      )}
+                    </span>
+                  </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">
+                <form
+                  onSubmit={onSearchSubmit}
+                  className="tw-w-full lg:tw-flex-1 xl:tw-min-w-[250px] 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"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true">
+                      <path
+                        fillRule="evenodd"
+                        d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <input
+                      id="search-rep"
+                      name="search-rep"
+                      type="text"
+                      required
+                      autoComplete="off"
+                      value={repSearch}
+                      onChange={handleRepSearchChange}
+                      onFocus={() => setIsOpen(true)}
+                      className="tw-form-input tw-appearance-none tw-block tw-w-full tw-rounded-lg tw-border tw-border-solid tw-border-white/10 tw-py-3 tw-pl-9 tw-pr-3 tw-bg-[#0A0A0A]/80 tw-text-white tw-text-sm tw-font-medium lg:tw-font-semibold tw-caret-primary-400 placeholder:tw-text-iron-500 lg:placeholder:tw-text-iron-400 placeholder:tw-font-normal focus:tw-outline-none focus:tw-border-blue-500/50 tw-transition tw-duration-300 tw-ease-out"
+                      placeholder="Category to grant rep for"
                     />
-                  </svg>
-                  <input
-                    id="search-rep"
-                    name="search-rep"
-                    type="text"
-                    required
-                    autoComplete="off"
-                    value={repSearch}
-                    onChange={handleRepSearchChange}
-                    onFocus={() => setIsOpen(true)}
-                    className="tw-form-input tw-appearance-none tw-block tw-w-full tw-rounded-lg tw-border tw-border-solid tw-border-iron-700 tw-py-3 tw-pl-11 tw-pr-3 tw-bg-iron-900 focus:tw-bg-iron-950 tw-text-iron-100 tw-font-normal tw-caret-primary-400 tw-shadow-sm hover:tw-ring-iron-700 placeholder:tw-text-iron-400 focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-inset focus:tw-ring-iron-700 tw-text-base sm:tw-leading-6 tw-transition tw-duration-300 tw-ease-out"
-                    placeholder="Category to grant rep for"
+                    {checkingAvailability && (
+                      <div className="tw-pointer-events-none tw-absolute tw-inset-y-0 tw-flex tw-items-center tw-right-0 tw-pr-3">
+                        <CircleLoader />
+                      </div>
+                    )}
+                  </div>
+                  <AnimatePresence mode="wait" initial={false}>
+                    {isOpen && (
+                      <motion.div
+                        className="tw-origin-top tw-absolute tw-left-0 tw-top-full tw-z-10 tw-mt-1 tw-w-full tw-rounded-lg tw-shadow-xl tw-bg-iron-950 tw-ring-1 tw-ring-black tw-ring-opacity-5"
+                        initial={{ opacity: 0, y: -20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: -20 }}
+                        transition={{ duration: 0.2 }}
+                        onClick={(e) => e.stopPropagation()}>
+                        <UserPageRepNewRepSearchDropdown
+                          categories={categoriesToDisplay}
+                          state={repSearchState}
+                          minSearchLength={SEARCH_LENGTH.MIN}
+                          maxSearchLength={SEARCH_LENGTH.MAX}
+                          onRepSelect={onRepSelect}
+                        />
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </form>
+                <div className="tw-relative tw-flex tw-w-full lg:tw-w-32 xl:tw-w-36">
+                  <UserPageRateInput
+                    value={amountStr}
+                    onChange={setAmountStr}
+                    minMax={minMaxValues}
+                    isProxy={!!activeProfileProxy}
+                    spanClassName="tw-flex tw-flex-col tw-items-center tw-justify-center tw-rounded-l-lg tw-border tw-border-solid tw-border-white/10 tw-bg-[#0A0A0A]/80 tw-px-3"
+                    inputClassName="tw-form-input tw-appearance-none -tw-ml-px tw-block tw-w-full tw-rounded-l-none tw-rounded-r-lg tw-border tw-border-solid tw-border-white/10 tw-py-3 tw-px-3 tw-bg-[#0A0A0A]/80 tw-text-white tw-text-sm tw-font-medium lg:tw-font-semibold tw-caret-primary-400 placeholder:tw-text-iron-500 lg:placeholder:tw-text-iron-400 focus:tw-outline-none focus:tw-border-blue-500/50 tw-transition tw-duration-300 tw-ease-out"
                   />
-                  {checkingAvailability && (
-                    <div className="tw-pointer-events-none tw-absolute tw-inset-y-0 tw-flex tw-items-center tw-right-0 tw-pr-3">
+                </div>
+                <button
+                  type="button"
+                  disabled={isGrantDisabled}
+                  onClick={onGrantRep}
+                  className={`${
+                    isGrantDisabled
+                      ? "tw-cursor-not-allowed tw-opacity-50"
+                      : "tw-cursor-pointer hover:tw-bg-primary-600 hover:tw-border-primary-600"
+                  } tw-flex-shrink-0 tw-bg-primary-500 tw-border-primary-500 tw-px-4 tw-py-3 tw-text-sm tw-font-semibold tw-text-white tw-border tw-border-solid tw-rounded-lg tw-transition tw-duration-300 tw-ease-out`}>
+                  {mutating ? (
+                    <div className="tw-w-12">
                       <CircleLoader />
                     </div>
+                  ) : (
+                    "Grant Rep"
                   )}
-                </div>
-              </form>
-            </div>
-            <AnimatePresence mode="wait" initial={false}>
-              {isOpen && (
-                <motion.div
-                  className="tw-origin-top-right tw-absolute tw-z-10  tw-mt-1 tw-w-full tw-max-w-xs tw-rounded-lg tw-shadow-xl tw-bg-iron-950 tw-ring-1 tw-ring-black tw-ring-opacity-5"
-                  initial={{ opacity: 0, y: -20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -20 }}
-                  transition={{ duration: 0.2 }}
-                  onClick={(e) => e.stopPropagation()}>
-                  <UserPageRepNewRepSearchDropdown
-                    categories={categoriesToDisplay}
-                    state={repSearchState}
-                    minSearchLength={SEARCH_LENGTH.MIN}
-                    maxSearchLength={SEARCH_LENGTH.MAX}
-                    onRepSelect={onRepSelect}
-                  />
-                </motion.div>
+                </button>
+              </div>
+              {selectedCategory && (
+                <UserRateAdjustmentHelper
+                  inLineValues={true}
+                  originalValue={repState?.rater_contribution ?? 0}
+                  adjustedValue={newRating}
+                  adjustmentType="Rep"
+                />
               )}
-            </AnimatePresence>
+            </div>
           </div>
         </div>
         <AnimatePresence mode="wait" initial={false}>
diff --git a/components/user/rep/new-rep/UserPageRepNewRepSearchDropdown.tsx b/components/user/rep/new-rep/UserPageRepNewRepSearchDropdown.tsx
index a1d8ce45b9..1cd5558d18 100644
--- a/components/user/rep/new-rep/UserPageRepNewRepSearchDropdown.tsx
+++ b/components/user/rep/new-rep/UserPageRepNewRepSearchDropdown.tsx
@@ -28,7 +28,7 @@ export default function UserPageRepNewRepSearchDropdown({
             </li>
           )}
           {state === RepSearchState.LOADING && (
-            <li className="tw-group tw-text-iron-200 tw-text-sm tw-justify-between tw-w-full tw-flex tw-rounded-lg tw-relative tw-cursor-pointer tw-select-none tw-p-2 hover:tw-bg-iron-700 tw-transition tw-duration-300 tw-ease-out">
+            <li className="tw-group tw-text-iron-200 tw-text-sm tw-font-normal tw-justify-between tw-w-full tw-flex tw-rounded-lg tw-relative tw-cursor-pointer tw-select-none tw-p-2 hover:tw-bg-iron-700 tw-transition tw-duration-300 tw-ease-out">
               Loading...
             </li>
           )}
diff --git a/components/user/rep/new-rep/UserPageRepNewRepSearchHeader.tsx b/components/user/rep/new-rep/UserPageRepNewRepSearchHeader.tsx
index c3a3107e79..b7528570b9 100644
--- a/components/user/rep/new-rep/UserPageRepNewRepSearchHeader.tsx
+++ b/components/user/rep/new-rep/UserPageRepNewRepSearchHeader.tsx
@@ -102,32 +102,37 @@ export default function UserPageRepNewRepSearchHeader({
   return (
     <div className="tw-flex tw-flex-col tw-space-y-1">
       {!!activeProfileProxy && (
-        <span className="tw-text-base tw-block tw-text-iron-300 tw-font-normal">
+        <span className="tw-text-xs tw-block tw-text-iron-400 tw-font-medium">
           <span>You are acting as proxy for:</span>
-          <span className="tw-ml-1 tw-font-semibold tw-text-iron-50">
+          <span className="tw-ml-1 tw-font-bold tw-text-iron-300">
             <Link href={`/${activeProfileProxy.created_by.handle}`}>
               {activeProfileProxy.created_by.handle}
             </Link>
           </span>
         </span>
       )}
-      {!activeProfileProxy && (
-        <span className="tw-text-base tw-block tw-text-iron-300 tw-font-normal">
-          <span>Your available Rep:</span>
-          <span className="tw-ml-1 tw-font-semibold tw-text-iron-50">
-            {formatNumberWithCommas(availableCredit)}
-          </span>
-        </span>
-      )}
-      <span className="tw-text-base tw-block tw-text-iron-300 tw-font-normal">
+      <div className="tw-flex tw-items-center tw-gap-3 tw-text-xs tw-text-iron-400 tw-font-medium">
+        {!activeProfileProxy && (
+          <>
+            <span>
+              <span>Your available Rep:</span>
+              <span className="tw-ml-1 tw-font-bold tw-text-iron-300">
+                {formatNumberWithCommas(availableCredit)}
+              </span>
+            </span>
+            <span className="tw-w-px tw-h-3 tw-bg-white/20" />
+          </>
+        )}
         <span>
-          Your Rep assigned to{" "}
-          {profile.query ?? profile.handle ?? profile.display}:
-        </span>
-        <span className="tw-ml-1 tw-font-semibold tw-text-iron-50">
-          {repRates ? formatNumberWithCommas(activeRepRates.rated) : ""}
+          <span>
+            Your Rep assigned to{" "}
+            {profile.query ?? profile.handle ?? profile.display}:
+          </span>
+          <span className="tw-ml-1 tw-font-bold tw-text-iron-300">
+            {repRates ? formatNumberWithCommas(activeRepRates.rated) : ""}
+          </span>
         </span>
-      </span>
+      </div>
     </div>
   );
 }
diff --git a/components/user/rep/reps/UserPageRepReps.tsx b/components/user/rep/reps/UserPageRepReps.tsx
index afc84cddd7..390d7246d0 100644
--- a/components/user/rep/reps/UserPageRepReps.tsx
+++ b/components/user/rep/reps/UserPageRepReps.tsx
@@ -1,16 +1,14 @@
 "use client";
 
 import { useContext, useEffect, useState } from "react";
-import type {
-  ApiProfileRepRatesState,
-  RatingStats,
-} from "@/entities/IProfile";
-import UserPageRepRepsTop from "./UserPageRepRepsTop";
+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";
-const TOP_REPS_COUNT = 5;
+import UserPageRateWrapper from "../../utils/rate/UserPageRateWrapper";
+import UserPageRepNewRep from "../new-rep/UserPageRepNewRep";
+import { RateMatter } from "@/types/enums";
 
 export default function UserPageRepReps({
   repRates,
@@ -33,18 +31,11 @@ export default function UserPageRepReps({
     sortReps(repRates?.rating_stats ?? [])
   );
 
-  const getTopReps = (items: RatingStats[]) => {
-    return items.slice(0, TOP_REPS_COUNT);
-  };
-
-  const [topReps, setTopReps] = useState<RatingStats[]>(getTopReps(reps));
   useEffect(
     () => setReps(sortReps(repRates?.rating_stats ?? [])),
     [repRates?.rating_stats]
   );
 
-  useEffect(() => setTopReps(getTopReps(reps)), [reps]);
-
   const getCanEditRep = ({
     myProfile,
     targetProfile,
@@ -86,31 +77,31 @@ export default function UserPageRepReps({
   }, [connectedProfile, profile]);
 
   return (
-    <div>
-      {!!reps.length && (
-        <>
-          <div className="tw-mt-6 lg:tw-mt-8">
-            <h3 className="tw-float-none tw-mb-0 tw-text-lg tw-font-semibold tw-text-iron-100">
-              Top Rep
-            </h3>
-          </div>
-          <UserPageRepRepsTop
-            reps={topReps}
-            profile={profile}
-            canEditRep={canEditRep}
-          />
-          <div className="tw-mt-6 lg:tw-mt-8">
-            <h3 className="tw-float-none tw-block tw-mb-0 tw-text-lg tw-font-semibold tw-text-iron-100">
-              Total Rep
-            </h3>
+    <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>
-          <UserPageRepRepsTable
-            reps={reps}
-            profile={profile}
-            canEditRep={canEditRep}
-          />
-        </>
-      )}
+        )}
+      </div>
     </div>
   );
 }
diff --git a/components/user/rep/reps/UserPageRepRepsTop.tsx b/components/user/rep/reps/UserPageRepRepsTop.tsx
deleted file mode 100644
index 4f4d621b3c..0000000000
--- a/components/user/rep/reps/UserPageRepRepsTop.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { RatingStats } from "@/entities/IProfile";
-import UserPageRepsItem from "./UserPageRepsItem";
-import type { ApiIdentity } from "@/generated/models/ApiIdentity";
-
-export default function UserPageRepRepsTop({
-  reps,
-  profile,
-  canEditRep,
-}: {
-  readonly reps: RatingStats[];
-  readonly profile: ApiIdentity;
-  readonly canEditRep: boolean;
-}) {
-  return (
-    <div className="tw-mt-2 lg:tw-mt-4 tw-flex tw-flex-wrap tw-gap-y-4 tw-gap-x-4">
-      {reps.map((rep) => (
-        <UserPageRepsItem
-          rep={rep}
-          key={rep.category}
-          profile={profile}
-          canEditRep={canEditRep}
-        />
-      ))}
-    </div>
-  );
-}
diff --git a/components/user/rep/reps/UserPageRepsItem.tsx b/components/user/rep/reps/UserPageRepsItem.tsx
deleted file mode 100644
index 6c85d31fb4..0000000000
--- a/components/user/rep/reps/UserPageRepsItem.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-"use client";
-
-import CommonAnimationOpacity from "@/components/utils/animation/CommonAnimationOpacity";
-import type { RatingStats } from "@/entities/IProfile";
-import type { ApiIdentity } from "@/generated/models/ApiIdentity";
-import { formatNumberWithCommas } from "@/helpers/Helpers";
-import { useEffect, useState } from "react";
-import { Tooltip } from "react-tooltip";
-import UserPageRepModifyModal from "../modify-rep/UserPageRepModifyModal";
-import { AnimatePresence } from "framer-motion";
-export default function UserPageRepsItem({
-  rep,
-  profile,
-  canEditRep,
-}: {
-  readonly rep: RatingStats;
-  readonly profile: ApiIdentity;
-  readonly canEditRep: boolean;
-}) {
-  const isPositiveRating = rep.rating > 0;
-  const [isEditRepModalOpen, setIsEditRepModalOpen] = useState<boolean>(false);
-
-  const [isTouchScreen, setIsTouchScreen] = useState(false);
-  useEffect(() => {
-    setIsTouchScreen(window.matchMedia("(pointer: coarse)").matches);
-  }, []);
-
-  return (
-    <>
-      <button
-        onClick={() => setIsEditRepModalOpen(true)}
-        disabled={!canEditRep}
-        className="tw-bg-transparent tw-border-none tw-p-0 ">
-        <span
-          className={`${
-            canEditRep ? "hover:tw-bg-iron-700" : ""
-          } tw-flex tw-items-center tw-justify-between tw-gap-x-2 tw-rounded-md tw-bg-iron-800 tw-ring-1 tw-ring-inset tw-ring-iron-700 
-           tw-px-3 tw-py-1.5 sm:tw-py-1 tw-transition tw-duration-300 tw-ease-out`}>
-          <span className="tw-whitespace-nowrap tw-text-sm sm:tw-text-md tw-font-medium tw-text-iron-50">
-            {rep.category}
-          </span>
-
-          <span
-            className={`${
-              isPositiveRating ? "tw-text-green" : "tw-text-red"
-            } tw-whitespace-nowrap tw-font-medium tw-text-sm sm:tw-text-md`}>
-            <>
-              <span data-tooltip-id={`rep-${rep.category}-${rep.rating}`}>
-                {formatNumberWithCommas(rep.rating)}
-              </span>
-              {!isTouchScreen && !!rep.rater_contribution ? (
-                <Tooltip
-                  id={`rep-${rep.category}-${rep.rating}`}
-                  place="top"
-                  style={{
-                    backgroundColor: "#1F2937",
-                    color: "white",
-                    padding: "4px 8px",
-                  }}>
-                  My Rep: {formatNumberWithCommas(rep.rater_contribution)}
-                </Tooltip>
-              ) : null}
-            </>
-          </span>
-
-          <span className="tw-whitespace-nowrap tw-text-sm sm:tw-text-sm tw-font-medium tw-text-iron-400">
-            ({formatNumberWithCommas(rep.contributor_count)}{" "}
-            {rep.contributor_count === 1 ? "rater" : "raters"})
-          </span>
-        </span>
-      </button>
-      <AnimatePresence mode="sync" initial={true}>
-        {isEditRepModalOpen && (
-          <CommonAnimationOpacity
-            key="modal"
-            elementClasses="tw-absolute tw-z-10"
-            elementRole="dialog"
-            onClicked={(e) => e.stopPropagation()}>
-            <UserPageRepModifyModal
-              profile={profile}
-              category={rep.category}
-              onClose={() => setIsEditRepModalOpen(false)}
-            />
-          </CommonAnimationOpacity>
-        )}
-      </AnimatePresence>
-    </>
-  );
-}
diff --git a/components/user/rep/reps/table/UserPageRepRepsTable.tsx b/components/user/rep/reps/table/UserPageRepRepsTable.tsx
index 4c2254f5eb..83dbcbd761 100644
--- a/components/user/rep/reps/table/UserPageRepRepsTable.tsx
+++ b/components/user/rep/reps/table/UserPageRepRepsTable.tsx
@@ -6,7 +6,6 @@ import UserPageRepRepsTableBody from "./UserPageRepRepsTableBody";
 import UserPageRepRepsTableHeader from "./UserPageRepRepsTableHeader";
 import { SortDirection } from "@/entities/ISort";
 import { assertUnreachable } from "@/helpers/AllowlistToolHelpers";
-import CommonTableWrapper from "@/components/utils/table/CommonTableWrapper";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
 export enum RepsTableSort {
   REP = "REP",
@@ -14,15 +13,20 @@ export enum RepsTableSort {
   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
@@ -103,20 +107,43 @@ export default function UserPageRepRepsTable({
     }
   }, [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 (
-    <CommonTableWrapper>
-      <UserPageRepRepsTableHeader
-        activeType={sortType}
-        sortDirection={sortDirection}
-        showMyRates={canEditRep}
-        onSortTypeClick={onSortTypeClick}
-      />
+    <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={sortedReps}
-        profile={profile}
-        canEditRep={canEditRep}
-      />
-    </CommonTableWrapper>
+          <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
index caf898efd7..6c1a0d9a80 100644
--- a/components/user/rep/reps/table/UserPageRepRepsTableBody.tsx
+++ b/components/user/rep/reps/table/UserPageRepRepsTableBody.tsx
@@ -6,19 +6,22 @@ export default function UserPageRepRepsTableBody({
   reps,
   profile,
   canEditRep,
+  maxRep,
 }: {
   readonly reps: RatingStats[];
   readonly profile: ApiIdentity;
   readonly canEditRep: boolean;
+  readonly maxRep: number;
 }) {
   return (
-    <tbody className="tw-divide-y tw-divide-solid tw-divide-iron-800">
+    <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
index aa6fcb38bd..8061e091a0 100644
--- a/components/user/rep/reps/table/UserPageRepRepsTableHeader.tsx
+++ b/components/user/rep/reps/table/UserPageRepRepsTableHeader.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import type { SortDirection } from "@/entities/ISort";
+import { useEffect, useState } from "react";
 import { RepsTableSort } from "./UserPageRepRepsTable";
 import UserPageRepRepsTableHeaderSortableCell from "./UserPageRepRepsTableHeaderSortableCell";
 
@@ -27,11 +27,11 @@ export default function UserPageRepRepsTableHeader({
   useEffect(() => setTypes(getTypes(showMyRates)), [showMyRates]);
 
   return (
-    <thead className="tw-bg-iron-950 tw-border-b tw-border-x-0 tw-border-t-0 tw-border-white/10">
-      <tr>
+    <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 sm:tw-px-6 tw-py-3 tw-text-left tw-text-sm sm:tw-text-md tw-font-medium tw-text-iron-400">
+          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) => (
diff --git a/components/user/rep/reps/table/UserPageRepRepsTableHeaderSortableCell.tsx b/components/user/rep/reps/table/UserPageRepRepsTableHeaderSortableCell.tsx
index f5204cd46f..0fc47ce288 100644
--- a/components/user/rep/reps/table/UserPageRepRepsTableHeaderSortableCell.tsx
+++ b/components/user/rep/reps/table/UserPageRepRepsTableHeaderSortableCell.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import CommonTableSortIcon from "@/components/user/utils/icons/CommonTableSortIcon";
 import { SortDirection } from "@/entities/ISort";
+import { useEffect, useState } from "react";
 import { RepsTableSort } from "./UserPageRepRepsTable";
-import CommonTableSortIcon from "@/components/user/utils/icons/CommonTableSortIcon";
 
 export default function UserPageRepRepsTableHeaderSortableCell({
   type,
@@ -37,15 +37,16 @@ export default function UserPageRepRepsTableHeaderSortableCell({
   return (
     <th
       scope="col"
-      className="tw-px-4 sm:tw-px-6 tw-whitespace-nowrap tw-group tw-cursor-pointer tw-py-3 tw-text-right tw-text-sm sm:tw-text-md tw-font-medium tw-text-iron-400"
+      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-primary-400" : "group-hover:tw-text-iron-200"
+          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>
-      <span className="-tw-mt-0.5 tw-ml-2">
+      {/* 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
index fb52531970..0325157b6f 100644
--- a/components/user/rep/reps/table/UserPageRepRepsTableItem.tsx
+++ b/components/user/rep/reps/table/UserPageRepRepsTableItem.tsx
@@ -2,22 +2,21 @@
 
 import { useState } from "react";
 import type { RatingStats } from "@/entities/IProfile";
-import CommonAnimationOpacity from "@/components/utils/animation/CommonAnimationOpacity";
 import UserPageRepModifyModal from "@/components/user/rep/modify-rep/UserPageRepModifyModal";
 import { formatNumberWithCommas } from "@/helpers/Helpers";
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
-import { AnimatePresence } from "framer-motion";
+
 export default function UserPageRepRepsTableItem({
   rep,
   profile,
   canEditRep,
+  maxRep,
 }: {
   readonly rep: RatingStats;
   readonly profile: ApiIdentity;
   readonly canEditRep: boolean;
+  readonly maxRep: number;
 }) {
-  const isPositiveRating = rep.rating > 0;
-  const isPositiveRaterContribution = rep.rater_contribution > 0;
   const [isEditRepModalOpen, setIsEditRepModalOpen] = useState<boolean>(false);
 
   const onTableClick = () => {
@@ -26,54 +25,85 @@ export default function UserPageRepRepsTableItem({
     }
   };
 
+  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
-      key={rep.category}
-      className={
-        canEditRep
-          ? "hover:tw-bg-iron-800 tw-transition tw-duration-300 tw-ease-out tw-cursor-pointer even:tw-bg-iron-900"
-          : "even:tw-bg-iron-900"
-      }
-      onClick={onTableClick}>
-      <td className="tw-max-w-[12rem] lg:tw-max-w-[20rem] tw-truncate tw-whitespace-nowrap tw-py-3 tw-px-4 sm:tw-px-6 tw-text-sm sm:tw-text-base tw-font-medium tw-text-iron-50">
-        <span>{rep.category}</span>
-      </td>
-      <td
-        className={`${
-          isPositiveRating ? "tw-text-green" : "tw-text-red"
-        } tw-whitespace-nowrap tw-py-3 tw-px-4 sm:tw-px-6 tw-text-sm sm:tw-text-base tw-font-medium tw-text-right`}>
-        {formatNumberWithCommas(rep.rating)}
-      </td>
-      <td className="tw-whitespace-nowrap tw-py-3 tw-px-4 sm:tw-px-6 tw-text-sm sm:tw-text-base tw-font-medium tw-text-right tw-text-iron-400">
-        {formatNumberWithCommas(rep.contributor_count)}
-      </td>
-      {canEditRep && (
-        <>
+    <>
+      <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={`${
-              isPositiveRaterContribution ? "tw-text-green" : "tw-text-red"
-            } tw-whitespace-nowrap tw-py-3 tw-px-4 sm:tw-px-6 tw-text-sm sm:tw-text-base tw-font-medium tw-text-right`}>
-            {rep.rater_contribution
-              ? formatNumberWithCommas(rep.rater_contribution)
-              : " "}
-          </td>
-          <AnimatePresence mode="sync" initial={true}>
-            {isEditRepModalOpen && (
-              <CommonAnimationOpacity
-                key="modal"
-                elementClasses="tw-absolute tw-z-10"
-                elementRole="dialog"
-                onClicked={(e) => e.stopPropagation()}>
-                <UserPageRepModifyModal
-                  profile={profile}
-                  category={rep.category}
-                  onClose={() => setIsEditRepModalOpen(false)}
-                />
-              </CommonAnimationOpacity>
+            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>
             )}
-          </AnimatePresence>
-        </>
+          </td>
+        )}
+      </tr>
+
+      {canEditRep && isEditRepModalOpen && (
+        <UserPageRepModifyModal
+          profile={profile}
+          category={rep.category}
+          onClose={() => setIsEditRepModalOpen(false)}
+        />
       )}
-    </tr>
+    </>
   );
 }
diff --git a/components/user/user-page-header/about/UserPageHeaderAboutStatement.tsx b/components/user/user-page-header/about/UserPageHeaderAboutStatement.tsx
index dd3aeb16f1..ec05ab0c8c 100644
--- a/components/user/user-page-header/about/UserPageHeaderAboutStatement.tsx
+++ b/components/user/user-page-header/about/UserPageHeaderAboutStatement.tsx
@@ -25,7 +25,7 @@ export default function UserPageHeaderAboutStatement({
   return (
     <div className="tw-space-y-2">
       <div
-        className={`tw-mb-0 tw-whitespace-pre-line tw-text-md tw-font-normal tw-leading-relaxed tw-text-zinc-300 ${clampClass}`}
+        className={`tw-mb-0 tw-whitespace-pre-line tw-text-md tw-font-medium tw-leading-relaxed tw-text-iron-200 ${clampClass}`}
       >
         {statement.statement_value}
       </div>
diff --git a/components/user/user-page-header/name/UserPageHeaderName.tsx b/components/user/user-page-header/name/UserPageHeaderName.tsx
index 20180de98c..d8fff0fdc2 100644
--- a/components/user/user-page-header/name/UserPageHeaderName.tsx
+++ b/components/user/user-page-header/name/UserPageHeaderName.tsx
@@ -65,7 +65,7 @@ export default function UserPageHeaderName({
             </p>
           </UserPageHeaderNameWrapper>
           {profile?.handle && (
-            <div className="tw-flex tw-h-5 tw-w-5 tw-items-center tw-justify-center tw-self-center md:-tw-mt-0.5">
+            <div className="tw-flex tw-h-5 tw-w-5 tw-items-center tw-justify-center">
               <UserCICTypeIconWrapper profile={profile} />
             </div>
           )}
diff --git a/components/user/utils/CommonProfileLink.tsx b/components/user/utils/CommonProfileLink.tsx
index ccc43be975..03b2475929 100644
--- a/components/user/utils/CommonProfileLink.tsx
+++ b/components/user/utils/CommonProfileLink.tsx
@@ -9,10 +9,12 @@ export default function CommonProfileLink({
   handleOrWallet,
   isCurrentUser,
   tabTarget,
+  textClassName,
 }: {
   readonly handleOrWallet: string;
   readonly isCurrentUser: boolean;
   readonly tabTarget: UserPageTabKey;
+  readonly textClassName?: string | undefined;
 }) {
   const pathname = usePathname();
   const url = getProfileTargetRoute({
@@ -20,17 +22,19 @@ export default function CommonProfileLink({
     pathname: pathname ?? "",
     defaultPath: tabTarget,
   });
+  const resolvedTextClassName =
+    textClassName ?? "tw-text-base tw-font-medium tw-text-iron-200";
 
   return (
     <Link
       href={url}
       className={`${
         isCurrentUser ? "tw-pointer-events-none tw-no-underline" : ""
-      } tw-leading-4 tw-p-0`}>
+      } tw-leading-4 tw-p-0 tw-no-underline hover:tw-no-underline`}>
       <span
         className={`${
           isCurrentUser ? "" : "tw-cursor-pointer"
-        } tw-whitespace-nowrap tw-text-base tw-font-medium tw-text-iron-200 hover:tw-text-iron-400 tw-transition tw-duration-300 tw-ease-out`}>
+        } tw-whitespace-nowrap hover:tw-text-iron-400 tw-transition tw-duration-300 tw-ease-out ${resolvedTextClassName}`}>
         {handleOrWallet}
       </span>
     </Link>
diff --git a/components/user/utils/icons/EmailIcon.tsx b/components/user/utils/icons/EmailIcon.tsx
index 7eccfc9a34..4a466f7a7d 100644
--- a/components/user/utils/icons/EmailIcon.tsx
+++ b/components/user/utils/icons/EmailIcon.tsx
@@ -1,7 +1,7 @@
 export default function EmailIcon() {
   return (
     <svg
-      className="tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-100 tw-align-top"
+      className="tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-300 tw-align-top"
       aria-hidden="true"
       viewBox="0 0 24 24"
       fill="none"
diff --git a/components/user/utils/icons/PhoneIcon.tsx b/components/user/utils/icons/PhoneIcon.tsx
index 066aa940ef..31bc568eab 100644
--- a/components/user/utils/icons/PhoneIcon.tsx
+++ b/components/user/utils/icons/PhoneIcon.tsx
@@ -1,7 +1,7 @@
 export default function PhoneIcon() {
   return (
     <svg
-      className="tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-100 tw-align-top"
+      className="tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-300 tw-align-top"
       aria-hidden="true"
       viewBox="0 0 24 24"
       fill="none"
diff --git a/components/user/utils/icons/WebsiteIcon.tsx b/components/user/utils/icons/WebsiteIcon.tsx
index 7b3de13694..b5f234ca60 100644
--- a/components/user/utils/icons/WebsiteIcon.tsx
+++ b/components/user/utils/icons/WebsiteIcon.tsx
@@ -1,7 +1,7 @@
 export default function WebsiteIcon() {
   return (
     <svg
-      className="tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-100 tw-align-top"
+      className="tw-flex-shrink-0 tw-h-5 tw-w-5 tw-text-iron-300 tw-align-top"
       aria-hidden="true"
       viewBox="0 0 24 24"
       fill="none"
diff --git a/components/user/utils/rate/UserPageRateInput.tsx b/components/user/utils/rate/UserPageRateInput.tsx
new file mode 100644
index 0000000000..09a83b9354
--- /dev/null
+++ b/components/user/utils/rate/UserPageRateInput.tsx
@@ -0,0 +1,113 @@
+import { getStringAsNumberOrZero } from "@/helpers/Helpers";
+import type { RefObject } from "react";
+
+const DEFAULT_INPUT_CLASS_NAME =
+  "tw-appearance-none -tw-ml-0.5 tw-block tw-w-full tw-rounded-l-none tw-rounded-r-lg tw-border-0 tw-py-3 tw-px-3 tw-bg-iron-900 focus:tw-bg-iron-950 tw-text-white tw-font-medium tw-caret-primary-400 tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-iron-700 hover:tw-ring-iron-600 placeholder:tw-text-iron-500 focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-inset tw-text-sm tw-transition tw-duration-300 tw-ease-out";
+
+const DEFAULT_SPAN_CLASS_NAME =
+  "tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-iron-900 tw-rounded-l-lg tw-border tw-border-solid tw-border-iron-700 tw-px-3";
+
+const getValueStr = (val: string): string => {
+  if (val.length > 1 && val.startsWith("0")) {
+    return val.slice(1);
+  }
+  return val;
+};
+
+export default function UserPageRateInput({
+  value,
+  onChange,
+  minMax,
+  isProxy,
+  inputRef,
+  inputClassName = DEFAULT_INPUT_CLASS_NAME,
+  spanClassName = DEFAULT_SPAN_CLASS_NAME,
+  inputId,
+  focusRingClassName,
+  required = false,
+}: {
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  readonly minMax: { min: number; max: number };
+  readonly isProxy: boolean;
+  readonly inputRef?: RefObject<HTMLInputElement | null>;
+  readonly inputClassName?: string;
+  readonly spanClassName?: string;
+  readonly inputId?: string;
+  readonly focusRingClassName?: string;
+  readonly required?: boolean;
+}) {
+  const valueAsNumber = getStringAsNumberOrZero(value);
+  const isValidValue =
+    isProxy || (valueAsNumber >= minMax.min && valueAsNumber <= minMax.max);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = event.currentTarget.value;
+    const strVal = ["-0", "0-"].includes(inputValue) ? "-" : inputValue;
+    if (/^-?\d*$/.test(strVal)) {
+      onChange(getValueStr(strVal));
+    }
+  };
+
+  const handleBlur = () => {
+    if (isProxy) return;
+    const { min, max } = minMax;
+    const valueAsNumber = getStringAsNumberOrZero(value);
+    if (valueAsNumber > max) {
+      onChange(`${max}`);
+      return;
+    }
+    if (valueAsNumber < min) {
+      onChange(`${min}`);
+    }
+  };
+
+  return (
+    <>
+      <span className={spanClassName}>
+        <svg
+          className="tw-w-3.5 tw-h-3.5 tw-flex-shrink-0 tw-text-iron-500"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M12 5V19M5 12H19"
+            stroke="currentColor"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        <svg
+          className="tw-w-3.5 tw-h-3.5 tw-flex-shrink-0 tw-text-iron-500"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M5 12H19"
+            stroke="currentColor"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </span>
+      <input
+        ref={inputRef}
+        type="text"
+        id={inputId}
+        autoComplete="off"
+        required={required}
+        value={value}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        className={`${
+          focusRingClassName ??
+          (isValidValue ? "focus:tw-ring-primary-400" : "focus:tw-ring-red")
+        } ${inputClassName}`}
+      />
+    </>
+  );
+}
diff --git a/components/user/utils/rate/UserPageRateWrapper.tsx b/components/user/utils/rate/UserPageRateWrapper.tsx
index f1d0471f8c..42a08ab780 100644
--- a/components/user/utils/rate/UserPageRateWrapper.tsx
+++ b/components/user/utils/rate/UserPageRateWrapper.tsx
@@ -29,10 +29,12 @@ export default function UserPageRateWrapper({
   profile,
   type,
   children,
+  hideOwnProfileMessage = false,
 }: {
   readonly profile: ApiIdentity;
   readonly type: RateMatter;
   readonly children: React.ReactNode;
+  readonly hideOwnProfileMessage?: boolean;
 }) {
   const { address } = useSeizeConnectContext();
   const { activeProfileProxy, connectedProfile } = useContext(AuthContext);
@@ -110,6 +112,10 @@ export default function UserPageRateWrapper({
     setRaterContextMessage(getRaterContextMessage(context));
   }, [connectedProfile, activeProfileProxy, address, profile, type]);
 
+  if (raterContext === RaterContext.MY_PROFILE && hideOwnProfileMessage) {
+    return null;
+  }
+
   if (raterContextMessage) {
     return <CommonInfoBox message={raterContextMessage} />;
   }
diff --git a/components/user/utils/rate/UserRateAdjustmentHelper.tsx b/components/user/utils/rate/UserRateAdjustmentHelper.tsx
index 2c45432f22..931b019641 100644
--- a/components/user/utils/rate/UserRateAdjustmentHelper.tsx
+++ b/components/user/utils/rate/UserRateAdjustmentHelper.tsx
@@ -16,7 +16,7 @@ export default function UserRateAdjustmentHelper({
       className={`${
         inLineValues
           ? "tw-mt-2 tw-flex tw-flex-wrap tw-gap-y-1 tw-gap-x-4"
-          : "tw-mt-3 md:tw-mt-0 tw-space-x-4 md:tw-space-x-0 md:-tw-space-y-1 tw-flex md:tw-flex-col"
+          : "tw-grid tw-grid-cols-2 tw-gap-2 tw-mb-4"
       } `}
     >
       <UserRateAdjustmentHelperValue
diff --git a/components/user/utils/rate/UserRateAdjustmentHelperValue.tsx b/components/user/utils/rate/UserRateAdjustmentHelperValue.tsx
index 65dc261ddc..016aad3464 100644
--- a/components/user/utils/rate/UserRateAdjustmentHelperValue.tsx
+++ b/components/user/utils/rate/UserRateAdjustmentHelperValue.tsx
@@ -44,11 +44,11 @@ export default function UserRateAdjustmentHelperValue({
   }, [value]);
 
   return (
-    <div className="tw-space-x-1.5">
-      <span className="tw-text-sm tw-text-iron-300 tw-font-normal">
+    <div className="tw-flex tw-items-center tw-gap-1.5 tw-px-2 tw-py-1.5 tw-bg-iron-800/50 tw-border tw-border-solid tw-border-iron-700/50 tw-rounded">
+      <span className="tw-text-xs tw-text-iron-500 tw-font-medium">
         {title}
       </span>
-      <span className={`${CLASSES[valueState]} tw-text-sm tw-font-semibold `}>
+      <span className={`${CLASSES[valueState]} tw-text-xs tw-font-semibold`}>
         {valueString}
       </span>
     </div>
diff --git a/components/user/utils/raters-table/ProfileRatersTable.tsx b/components/user/utils/raters-table/ProfileRatersTable.tsx
index 96d5f54945..17adedc30a 100644
--- a/components/user/utils/raters-table/ProfileRatersTable.tsx
+++ b/components/user/utils/raters-table/ProfileRatersTable.tsx
@@ -44,7 +44,7 @@ export default function ProfileRatersTable({
                 isLoading={loading}
                 onSortTypeClick={onSortTypeClick}
               />
-              <ProfileRatersTableBody ratings={ratings} type={type} />
+              <ProfileRatersTableBody ratings={ratings} />
             </table>
           </div>
 
diff --git a/components/user/utils/raters-table/ProfileRatersTableBody.tsx b/components/user/utils/raters-table/ProfileRatersTableBody.tsx
index 1ff3ec11a3..55169d2fde 100644
--- a/components/user/utils/raters-table/ProfileRatersTableBody.tsx
+++ b/components/user/utils/raters-table/ProfileRatersTableBody.tsx
@@ -1,14 +1,11 @@
 import type { RatingWithProfileInfoAndLevel } from "@/entities/IProfile";
 import { getRandomObjectId } from "@/helpers/AllowlistToolHelpers";
-import type { ProfileRatersTableType } from "@/types/enums";
 import ProfileRatersTableItem from "./ProfileRatersTableItem";
 
 export default function ProfileRatersTableBody({
   ratings,
-  type,
 }: {
   readonly ratings: RatingWithProfileInfoAndLevel[];
-  readonly type: ProfileRatersTableType;
 }) {
   return (
     <tbody className="tw-divide-x-0 tw-divide-y tw-divide-solid tw-divide-iron-800">
@@ -16,7 +13,6 @@ export default function ProfileRatersTableBody({
         <ProfileRatersTableItem
           key={getRandomObjectId()}
           rating={rating}
-          type={type}
         />
       ))}
     </tbody>
diff --git a/components/user/utils/raters-table/ProfileRatersTableHeader.tsx b/components/user/utils/raters-table/ProfileRatersTableHeader.tsx
index 37412942db..e92b17e2c5 100644
--- a/components/user/utils/raters-table/ProfileRatersTableHeader.tsx
+++ b/components/user/utils/raters-table/ProfileRatersTableHeader.tsx
@@ -36,7 +36,7 @@ export default function ProfileRatersTableHeader({
   return (
     <thead className="tw-border-x-0 tw-border-b tw-border-t-0 tw-border-white/10">
       <tr>
-        <th className="tw-whitespace-nowrap tw-px-4 tw-py-3.5 tw-text-left tw-text-sm tw-font-medium tw-text-iron-400 sm:tw-px-6 sm:tw-text-md lg:tw-pr-4">
+        <th className="tw-whitespace-nowrap tw-px-4 tw-py-3.5 tw-text-left tw-text-[11px] tw-font-bold tw-text-iron-500 tw-uppercase tw-tracking-widest sm:tw-px-6 lg:tw-pr-4">
           Name
         </th>
         <ProfileRatersTableHeaderSortableCell
diff --git a/components/user/utils/raters-table/ProfileRatersTableHeaderSortableCell.tsx b/components/user/utils/raters-table/ProfileRatersTableHeaderSortableCell.tsx
index f606d0cef0..cdbf1d4d37 100644
--- a/components/user/utils/raters-table/ProfileRatersTableHeaderSortableCell.tsx
+++ b/components/user/utils/raters-table/ProfileRatersTableHeaderSortableCell.tsx
@@ -31,7 +31,7 @@ export default function ProfileRatersTableHeaderSortableCell({
   return (
     <th
       onClick={() => onSortTypeClick(sortType)}
-      className="tw-group tw-cursor-pointer tw-whitespace-nowrap tw-px-4 tw-py-3.5 tw-text-right tw-text-sm tw-font-medium tw-text-iron-400 sm:tw-px-6 sm:tw-text-md lg:tw-pl-4"
+      className="tw-group tw-cursor-pointer tw-whitespace-nowrap tw-px-4 tw-py-3.5 tw-text-right tw-text-[11px] tw-font-bold tw-text-iron-500 tw-uppercase tw-tracking-widest sm:tw-px-6 lg:tw-pl-4"
     >
       <span
         className={`${
diff --git a/components/user/utils/raters-table/ProfileRatersTableItem.tsx b/components/user/utils/raters-table/ProfileRatersTableItem.tsx
index ad37cae4a4..ec899a82a8 100644
--- a/components/user/utils/raters-table/ProfileRatersTableItem.tsx
+++ b/components/user/utils/raters-table/ProfileRatersTableItem.tsx
@@ -1,18 +1,14 @@
 "use client";
 
 import type { RatingWithProfileInfoAndLevel } from "@/entities/IProfile";
-import { assertUnreachable } from "@/helpers/AllowlistToolHelpers";
 import { formatNumberWithCommas, getTimeAgo } from "@/helpers/Helpers";
-import { ProfileRatersTableType } from "@/types/enums";
 import Link from "next/link";
 import UserCICAndLevel from "../UserCICAndLevel";
 
 export default function ProfileRatersTableItem({
   rating,
-  type,
 }: {
   readonly rating: RatingWithProfileInfoAndLevel;
-  readonly type: ProfileRatersTableType;
 }) {
   const getRatingStr = (rating: number) => {
     return rating > 0
@@ -24,19 +20,7 @@ export default function ProfileRatersTableItem({
   const ratingColor = isPositiveRating ? "tw-text-green" : "tw-text-red";
   const timeAgo = getTimeAgo(new Date(rating.last_modified).getTime());
 
-  const getProfileRoute = (): string => {
-    switch (type) {
-      case ProfileRatersTableType.CIC_RECEIVED:
-      case ProfileRatersTableType.CIC_GIVEN:
-        return `/${rating.handle}/identity`;
-      case ProfileRatersTableType.REP_RECEIVED:
-      case ProfileRatersTableType.REP_GIVEN:
-        return `/${rating.handle}/rep`;
-      default:
-        assertUnreachable(type);
-        return "";
-    }
-  };
+  const getProfileRoute = (): string => `/${rating.handle}/identity`;
 
   const profileRoute = getProfileRoute();
 
diff --git a/components/user/utils/stats/UserStatsRow.tsx b/components/user/utils/stats/UserStatsRow.tsx
index 0a06ade895..3688b8f5e4 100644
--- a/components/user/utils/stats/UserStatsRow.tsx
+++ b/components/user/utils/stats/UserStatsRow.tsx
@@ -59,10 +59,10 @@ export default function UserStatsRow({
           href={`/${routeHandle}/collected`}
           className="tw-no-underline desktop-hover:hover:tw-underline tw-transition tw-duration-300 tw-ease-out"
         >
-          <span className={`${classes.text} tw-font-semibold tw-text-zinc-300`}>
+          <span className={`${classes.text} tw-font-semibold tw-text-iron-300`}>
             {formatStatFloor(tdh)}
           </span>{" "}
-          <span className={`${classes.text} tw-font-medium tw-text-zinc-500`}>
+          <span className={`${classes.text} tw-font-medium tw-text-iron-500`}>
             TDH
           </span>
           {tdh_rate > 0 && (
@@ -81,10 +81,10 @@ export default function UserStatsRow({
           href={`/${routeHandle}/xtdh`}
           className="tw-no-underline desktop-hover:hover:tw-underline tw-transition tw-duration-300 tw-ease-out"
         >
-          <span className={`${classes.text} tw-font-semibold tw-text-zinc-300`}>
+          <span className={`${classes.text} tw-font-semibold tw-text-iron-300`}>
             {formatStatFloor(xtdh)}
           </span>{" "}
-          <span className={`${classes.text} tw-font-medium tw-text-zinc-500`}>
+          <span className={`${classes.text} tw-font-medium tw-text-iron-500`}>
             xTDH
           </span>
           {xtdh_rate > 0 && (
@@ -103,22 +103,22 @@ export default function UserStatsRow({
           href={`/${routeHandle}/identity`}
           className="tw-no-underline desktop-hover:hover:tw-underline tw-transition tw-duration-300 tw-ease-out"
         >
-          <span className={`${classes.text} tw-font-semibold tw-text-zinc-300`}>
+          <span className={`${classes.text} tw-font-semibold tw-text-iron-300`}>
             {formatStatFloor(cic)}
           </span>{" "}
-          <span className={`${classes.text} tw-font-medium tw-text-zinc-500`}>
+          <span className={`${classes.text} tw-font-medium tw-text-iron-500`}>
             NIC
           </span>
         </Link>
 
         <Link
-          href={`/${routeHandle}/rep`}
+          href={`/${routeHandle}/identity`}
           className="tw-no-underline desktop-hover:hover:tw-underline tw-transition tw-duration-300 tw-ease-out"
         >
-          <span className={`${classes.text} tw-font-semibold tw-text-zinc-300`}>
+          <span className={`${classes.text} tw-font-semibold tw-text-iron-300`}>
             {formatStatFloor(rep)}
           </span>{" "}
-          <span className={`${classes.text} tw-font-medium tw-text-zinc-500`}>
+          <span className={`${classes.text} tw-font-medium tw-text-iron-500`}>
             Rep
           </span>
         </Link>
@@ -127,10 +127,10 @@ export default function UserStatsRow({
           href={`/${routeHandle}/followers`}
           className="tw-no-underline desktop-hover:hover:tw-underline tw-transition tw-duration-300 tw-ease-out"
         >
-          <span className={`${classes.text} tw-font-semibold tw-text-zinc-300`}>
+          <span className={`${classes.text} tw-font-semibold tw-text-iron-300`}>
             {formatNumberWithCommas(count)}
           </span>{" "}
-          <span className={`${classes.text} tw-font-medium tw-text-zinc-500`}>
+          <span className={`${classes.text} tw-font-medium tw-text-iron-500`}>
             {followerLabel}
           </span>
         </Link>
diff --git a/components/user/utils/user-cic-status/UserCICStatus.tsx b/components/user/utils/user-cic-status/UserCICStatus.tsx
index fae3a84bb3..88677a41ad 100644
--- a/components/user/utils/user-cic-status/UserCICStatus.tsx
+++ b/components/user/utils/user-cic-status/UserCICStatus.tsx
@@ -27,7 +27,7 @@ export const CIC_META: Record<CICType, { title: string; class: string }> = {
   },
   [CICType.HIGHLY_ACCURATE]: {
     title: CIC_TO_TEXT[CICType.HIGHLY_ACCURATE],
-    class: "tw-text-[#3CCB7F]",
+    class: "tw-text-emerald-400",
   },
 };
 
diff --git a/components/user/utils/user-cic-type/icons/UserCICAccurateIcon.tsx b/components/user/utils/user-cic-type/icons/UserCICAccurateIcon.tsx
index f162bccd8f..87819db751 100644
--- a/components/user/utils/user-cic-type/icons/UserCICAccurateIcon.tsx
+++ b/components/user/utils/user-cic-type/icons/UserCICAccurateIcon.tsx
@@ -1,7 +1,7 @@
 export default function UserCICAccurateIcon() {
   return (
     <svg
-      className="tw-w-full tw-h-full tw-flex-shrink-0"
+      className="tw-w-full tw-h-full tw-flex-shrink-0 tw-align-top"
       viewBox="0 0 183 183"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/components/user/utils/user-cic-type/icons/UserCICHighlyAccurateIcon.tsx b/components/user/utils/user-cic-type/icons/UserCICHighlyAccurateIcon.tsx
index a6e0b353e4..77600111c1 100644
--- a/components/user/utils/user-cic-type/icons/UserCICHighlyAccurateIcon.tsx
+++ b/components/user/utils/user-cic-type/icons/UserCICHighlyAccurateIcon.tsx
@@ -2,7 +2,7 @@
 export default function UserCICHighlyAccurateIcon() {
   return (
     <svg
-      className="tw-w-full tw-h-full tw-flex-shrink-0"
+      className="tw-w-full tw-h-full tw-flex-shrink-0 tw-align-top"
       viewBox="0 0 183 183"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/components/user/utils/user-cic-type/icons/UserCICInaccurateIcon.tsx b/components/user/utils/user-cic-type/icons/UserCICInaccurateIcon.tsx
index a4be453d76..9c2e8f579d 100644
--- a/components/user/utils/user-cic-type/icons/UserCICInaccurateIcon.tsx
+++ b/components/user/utils/user-cic-type/icons/UserCICInaccurateIcon.tsx
@@ -1,8 +1,7 @@
-
-export default function UserCICAccurateIcon() {
+export default function UserCICInaccurateIcon() {
   return (
     <svg
-      className="tw-h-full tw-w-full tw-flex-shrink-0"
+      className="tw-h-full tw-w-full tw-flex-shrink-0 tw-align-top"
       viewBox="0 0 187 187"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/components/user/utils/user-cic-type/icons/UserCICProbablyAccurateIcon.tsx b/components/user/utils/user-cic-type/icons/UserCICProbablyAccurateIcon.tsx
index 5e9748256f..076ca408e3 100644
--- a/components/user/utils/user-cic-type/icons/UserCICProbablyAccurateIcon.tsx
+++ b/components/user/utils/user-cic-type/icons/UserCICProbablyAccurateIcon.tsx
@@ -2,7 +2,7 @@
 export default function UserCICProbablyAccurateIcon() {
   return (
     <svg
-      className="tw-w-full tw-h-full tw-flex-shrink-0"
+      className="tw-w-full tw-h-full tw-flex-shrink-0 tw-align-top"
       viewBox="0 0 183 183"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/components/user/utils/user-cic-type/icons/UserCICUnknownIcon.tsx b/components/user/utils/user-cic-type/icons/UserCICUnknownIcon.tsx
index df76c487d5..63537ddd58 100644
--- a/components/user/utils/user-cic-type/icons/UserCICUnknownIcon.tsx
+++ b/components/user/utils/user-cic-type/icons/UserCICUnknownIcon.tsx
@@ -1,7 +1,7 @@
 export default function UserCICUnknownIcon() {
   return (
     <svg
-      className="tw-w-full tw-h-full tw-flex-shrink-0"
+      className="tw-w-full tw-h-full tw-flex-shrink-0 tw-align-top"
       viewBox="0 0 183 183"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/components/utils/CommonInfoBox.tsx b/components/utils/CommonInfoBox.tsx
index d74ee1bf87..e45e59dea3 100644
--- a/components/utils/CommonInfoBox.tsx
+++ b/components/utils/CommonInfoBox.tsx
@@ -9,11 +9,11 @@ export default function CommonInfoBox({
     <div
       className={`${
         !widthFull && "sm:tw-w-auto"
-      } tw-w-full tw-inline-flex tw-items-center tw-rounded-lg tw-bg-primary-400/5 tw-border tw-border-solid tw-border-primary-400/30 tw-px-4 tw-py-3`}
+      } tw-inline-flex tw-w-full tw-items-center tw-rounded-lg tw-border tw-border-solid tw-border-primary-400/30 tw-bg-primary-400/5 tw-px-4 tw-py-3`}
     >
       <div className="tw-flex tw-items-center">
         <svg
-          className="tw-flex-shrink-0 tw-self-center tw-w-5 tw-h-5 tw-text-primary-300"
+          className="tw-h-4 tw-w-4 tw-flex-shrink-0 tw-self-center tw-text-primary-300"
           viewBox="0 0 24 24"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -26,8 +26,8 @@ export default function CommonInfoBox({
             strokeLinejoin="round"
           />
         </svg>
-        <div className="tw-ml-3 tw-self-center">
-          <h3 className="tw-text-sm sm:tw-text-md tw-mb-0 tw-font-semibold tw-text-primary-300 tw-break-all">
+        <div className="tw-ml-2 tw-self-center">
+          <h3 className="tw-mb-0 tw-text-sm tw-font-medium tw-text-primary-300">
             {message}
           </h3>
         </div>
diff --git a/components/utils/select/tabs/CommonTabs.tsx b/components/utils/select/tabs/CommonTabs.tsx
index 7e090b49a8..af102a930f 100644
--- a/components/utils/select/tabs/CommonTabs.tsx
+++ b/components/utils/select/tabs/CommonTabs.tsx
@@ -16,6 +16,7 @@ export default function CommonTabs<T, U = unknown>(
   const sortDirection =
     "sortDirection" in props ? props.sortDirection : undefined;
   const disabled = "disabled" in props ? props.disabled ?? false : false;
+  const size = "size" in props ? props.size : undefined;
 
 
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
@@ -160,7 +161,7 @@ export default function CommonTabs<T, U = unknown>(
               }}
               disabled={disabled}
               fill={props.fill ?? true}
-
+              size={size}
             />
           ))}
         </div>
diff --git a/components/utils/select/tabs/CommonTabsTab.tsx b/components/utils/select/tabs/CommonTabsTab.tsx
index 0131a56e7f..e8d58ede7f 100644
--- a/components/utils/select/tabs/CommonTabsTab.tsx
+++ b/components/utils/select/tabs/CommonTabsTab.tsx
@@ -19,7 +19,7 @@ export default function CommonTabsTab<T, U = unknown>(
         | undefined;
       readonly disabled?: boolean | undefined;
       readonly fill?: boolean | undefined;
-      readonly size?: "md" | "tabs" | undefined;
+      readonly size?: "sm" | "md" | "tabs" | undefined;
     }
   >
 ) {
@@ -32,6 +32,7 @@ export default function CommonTabsTab<T, U = unknown>(
     buttonRef,
     disabled = false,
     fill = true,
+    size = "md",
   } = props;
 
   const getIsActive = (): boolean => item.value === activeItem;
@@ -101,7 +102,7 @@ export default function CommonTabsTab<T, U = unknown>(
         } ${
           fill ? "tw-flex-1" : ""
         } ${
-          "tw-px-3 tw-py-1.5 tw-text-sm"
+          size === "sm" ? "tw-px-2 tw-py-1 tw-text-xs" : "tw-px-3 tw-py-1.5 tw-text-sm"
         } tw-whitespace-nowrap tw-leading-5 tw-font-medium tw-border-0 tw-rounded-lg tw-transition-all tw-duration-300 tw-ease-out tw-flex tw-items-center tw-justify-center tw-gap-2`}
       >
         {item.label}
diff --git a/components/utils/table/paginator/CommonTablePagination.tsx b/components/utils/table/paginator/CommonTablePagination.tsx
index 9568d4f9ef..e8e2416742 100644
--- a/components/utils/table/paginator/CommonTablePagination.tsx
+++ b/components/utils/table/paginator/CommonTablePagination.tsx
@@ -5,6 +5,8 @@ export default function CommonTablePagination({
   totalPages,
   haveNextPage,
   loading = false,
+  showTopBorder = true,
+  className,
 }: {
   readonly small: boolean;
   readonly currentPage: number;
@@ -12,14 +14,16 @@ export default function CommonTablePagination({
   readonly totalPages: number | null;
   readonly haveNextPage: boolean;
   readonly loading?: boolean | undefined;
+  readonly showTopBorder?: boolean | undefined;
+  readonly className?: string | undefined;
 }) {
   return (
     <div
       className={`${
-        small
-          ? "tw-px-4 sm:tw-px-6 tw-border-t tw-border-solid tw-border-x-0 tw-border-b-0 tw-border-iron-800"
+        small && showTopBorder
+          ? "tw-border-t tw-border-solid tw-border-x-0 tw-border-b-0 tw-border-iron-800"
           : ""
-      } tw-pt-4 tw-pb-3`}
+      } tw-pt-4 tw-pb-3 ${className ?? ""}`}
     >
       <div className="tw-flex tw-items-center tw-justify-between tw-w-full">
         {typeof totalPages === "number" ? (
diff --git a/helpers/profile-logs.helpers.ts b/helpers/profile-logs.helpers.ts
index f36f37d057..90de6f0dfe 100644
--- a/helpers/profile-logs.helpers.ts
+++ b/helpers/profile-logs.helpers.ts
@@ -5,6 +5,7 @@ import type {
 import {
   ProfileActivityFilterTargetType,
   ProfileActivityLogType,
+  RateMatter,
 } from "@/types/enums";
 
 const DISABLED_LOG_TYPES = [
@@ -56,7 +57,7 @@ export const convertActivityLogParams = ({
       : "",
   };
 
-  if (params.matter) {
+  if (params.matter === RateMatter.REP) {
     converted.rating_matter = params.matter;
   }
   if (params.groupId && !params.handleOrWallet && !disableActiveGroup) {
diff --git a/hooks/useRepAllocation.ts b/hooks/useRepAllocation.ts
new file mode 100644
index 0000000000..213c0c8d8f
--- /dev/null
+++ b/hooks/useRepAllocation.ts
@@ -0,0 +1,176 @@
+"use client";
+
+import { useContext, useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { AuthContext } from "@/components/auth/Auth";
+import { QueryKey } from "@/components/react-query-wrapper/ReactQueryWrapper";
+import { commonApiFetch } from "@/services/api/common-api";
+import type {
+  ApiProfileRepRatesState,
+  RatingStats,
+} from "@/entities/IProfile";
+import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import { ApiProfileProxyActionType } from "@/generated/models/ApiProfileProxyActionType";
+
+export function useRepAllocation({
+  profile,
+  category,
+}: {
+  readonly profile: ApiIdentity;
+  readonly category: string | null;
+}): {
+  repState: RatingStats | null;
+  heroAvailableRep: number;
+  proxyAvailableCredit: number | null;
+  minMaxValues: { readonly min: number; readonly max: number };
+} {
+  const { connectedProfile, activeProfileProxy } = useContext(AuthContext);
+
+  const { data: proxyGrantorRepRates } = useQuery<ApiProfileRepRatesState>({
+    queryKey: [
+      QueryKey.PROFILE_REP_RATINGS,
+      {
+        rater: activeProfileProxy?.created_by.handle,
+        handleOrWallet: profile?.handle,
+      },
+    ],
+    queryFn: async () =>
+      await commonApiFetch<ApiProfileRepRatesState>({
+        endpoint: `profiles/${profile?.query}/rep/ratings/received`,
+        params: activeProfileProxy?.created_by.handle
+          ? { rater: activeProfileProxy.created_by.handle }
+          : {},
+      }),
+    enabled: !!activeProfileProxy?.created_by.handle,
+  });
+
+  const { data: connectedProfileRepRates } =
+    useQuery<ApiProfileRepRatesState>({
+      queryKey: [
+        QueryKey.PROFILE_REP_RATINGS,
+        {
+          rater: connectedProfile?.handle,
+          handleOrWallet: profile?.handle,
+        },
+      ],
+      queryFn: async () =>
+        await commonApiFetch<ApiProfileRepRatesState>({
+          endpoint: `profiles/${profile?.query}/rep/ratings/received`,
+          params: connectedProfile?.handle
+            ? { rater: connectedProfile.handle }
+            : {},
+        }),
+      enabled: !!connectedProfile?.handle,
+    });
+
+  const getRepState = (): RatingStats | null => {
+    if (!category) return null;
+
+    if (activeProfileProxy && proxyGrantorRepRates) {
+      const target = proxyGrantorRepRates.rating_stats.find(
+        (s) => s.category === category
+      );
+      return (
+        target ?? {
+          category,
+          rating: 0,
+          contributor_count: 0,
+          rater_contribution: 0,
+        }
+      );
+    }
+
+    if (activeProfileProxy) return null;
+
+    if (connectedProfileRepRates) {
+      const target = connectedProfileRepRates.rating_stats.find(
+        (s) => s.category === category
+      );
+      return (
+        target ?? {
+          category,
+          rating: 0,
+          contributor_count: 0,
+          rater_contribution: 0,
+        }
+      );
+    }
+
+    return null;
+  };
+
+  const getProxyAvailableCredit = (): number | null => {
+    const repProxy = activeProfileProxy?.actions.find(
+      (a) => a.action_type === ApiProfileProxyActionType.AllocateRep
+    );
+    if (!repProxy) return null;
+    return Math.max(
+      (repProxy.credit_amount ?? 0) - (repProxy.credit_spent ?? 0),
+      0
+    );
+  };
+
+  const getHeroAvailableRep = (): number => {
+    if (activeProfileProxy) {
+      return proxyGrantorRepRates?.rep_rates_left_for_rater ?? 0;
+    }
+    return connectedProfileRepRates?.rep_rates_left_for_rater ?? 0;
+  };
+
+  const [repState, setRepState] = useState<RatingStats | null>(getRepState());
+  const [proxyAvailableCredit, setProxyAvailableCredit] = useState<
+    number | null
+  >(getProxyAvailableCredit());
+  const [heroAvailableRep, setHeroAvailableRep] = useState<number>(
+    getHeroAvailableRep()
+  );
+
+  useEffect(() => {
+    setRepState(getRepState());
+  }, [
+    category,
+    proxyGrantorRepRates,
+    activeProfileProxy,
+    connectedProfileRepRates,
+  ]);
+
+  useEffect(
+    () => setProxyAvailableCredit(getProxyAvailableCredit()),
+    [activeProfileProxy]
+  );
+
+  useEffect(
+    () => setHeroAvailableRep(getHeroAvailableRep()),
+    [activeProfileProxy, proxyGrantorRepRates, connectedProfileRepRates]
+  );
+
+  const getMinValue = (): number => {
+    const currentRep = repState?.rater_contribution ?? 0;
+    const minHeroRep = 0 - (Math.abs(currentRep) + heroAvailableRep);
+    if (typeof proxyAvailableCredit !== "number") return minHeroRep;
+    const minProxyRep = currentRep - proxyAvailableCredit;
+    return Math.abs(minHeroRep) < Math.abs(minProxyRep)
+      ? minHeroRep
+      : minProxyRep;
+  };
+
+  const getMaxValue = (): number => {
+    const currentRep = repState?.rater_contribution ?? 0;
+    const maxHeroRep = Math.abs(currentRep) + heroAvailableRep;
+    if (typeof proxyAvailableCredit !== "number") return maxHeroRep;
+    const maxProxyRep = currentRep + proxyAvailableCredit;
+    return Math.min(maxHeroRep, maxProxyRep);
+  };
+
+  const [minMaxValues, setMinMaxValues] = useState<{
+    readonly min: number;
+    readonly max: number;
+  }>({ min: getMinValue(), max: getMaxValue() });
+
+  useEffect(
+    () => setMinMaxValues({ min: getMinValue(), max: getMaxValue() }),
+    [repState, proxyGrantorRepRates, proxyAvailableCredit, heroAvailableRep]
+  );
+
+  return { repState, heroAvailableRep, proxyAvailableCredit, minMaxValues };
+}