From 5efabb8e0cbc846d022f69176c675a9da7a6c39e Mon Sep 17 00:00:00 2001
From: shittu adewale <sheriffhardewale@gmail.com>
Date: Tue, 27 Oct 2026 06:47:22 +0100
Subject: [PATCH 1/5] feat: enhance navbar and user profile layouts, improve
 prediction handling, and update recent activities UI

---
 .../src/components/layouts/navbar/navbar.tsx  |  42 +++++-
 .../layouts/user-profile-layout.tsx           |   2 +-
 .../src/components/ui/button/back-button.tsx  |  10 +-
 .../components/advanced-settings-panel.tsx    |   6 +-
 .../__tests__/prediction-confidence.test.tsx  | 126 ++++++++++++++++++
 .../components/map/draggable-grid.tsx         |   9 +-
 .../map/try-fair-prediction-results.tsx       |   9 +-
 .../components/prediction-history-button.tsx  |   2 +-
 .../map-requests-actions-menu.tsx             |  26 ++--
 .../__tests__/overview-mapping.test.tsx       |   2 +-
 .../components/overview/advanced-overview.tsx |   8 +-
 .../components/overview/basic-overview.tsx    |  11 +-
 .../components/overview/overview-hero.tsx     |   4 +-
 .../components/overview/recent-activities.tsx |  18 +--
 .../overview/recent-mapping-card.tsx          |  16 +--
 .../components/page-empty-state.tsx           |   2 +-
 .../components/profile-section-header.tsx     |   4 +-
 17 files changed, 235 insertions(+), 62 deletions(-)
 create mode 100644 frontend/src/features/try-fair/components/map/__tests__/prediction-confidence.test.tsx

diff --git a/frontend/src/components/layouts/navbar/navbar.tsx b/frontend/src/components/layouts/navbar/navbar.tsx
index 54f689101..93722f7f0 100644
--- a/frontend/src/components/layouts/navbar/navbar.tsx
+++ b/frontend/src/components/layouts/navbar/navbar.tsx
@@ -7,7 +7,7 @@ import { DashboardLink } from "./dashboard-link";
 import { NavLogo } from "@/components/layouts";
 import { APPLICATION_ROUTES, SHARED_CONTENT } from "@/constants";
 import { useAuth } from "@/app/providers/auth-provider";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useMatch, useNavigate } from "react-router-dom";
 import { useState } from "react";
 // import { UserNotifications } from "@/features/user-profile/components/notifications/user-notifications";
 import { AUTH_PROVIDER, FRONTEND_URL } from "@/config";
@@ -23,6 +23,8 @@ import {
 import { BackButton } from "@/components/ui/button";
 import { useNavbarState } from "@/components/layouts/navbar/hooks/use-navbar-state";
 import { CloudSaveStatus } from "@/components/layouts/navbar/cloud-save-status";
+import { useGetSinglePrediction } from "@/features/user-profile/hooks/use-predictions";
+import type { TOfflinePrediction } from "@/types";
 
 const IS_HANKO_AUTH = AUTH_PROVIDER === "hanko";
 
@@ -41,6 +43,15 @@ export const NavBar = () => {
     showDashboardLink,
     isMapRequestResult,
   } = useNavbarState();
+  const resultMatch = useMatch(APPLICATION_ROUTES.MAP_REQUEST_RESULT);
+  const initialPrediction = (
+    location.state as { prediction?: TOfflinePrediction } | null
+  )?.prediction;
+  const { data: prediction } = useGetSinglePrediction(
+    resultMatch?.params.id,
+    isMapRequestResult ? initialPrediction : undefined,
+  );
+  const resultTitle = prediction?.description || "Map Request Result";
 
   const isTryFairPage = location.pathname.includes(APPLICATION_ROUTES.TRY_FAIR);
   const isProfilePage = location.pathname.includes(
@@ -100,19 +111,40 @@ export const NavBar = () => {
       <nav
         className={`${styles.nav} app-padding z-20 py-1 border-b border-gray-border`}
       >
-        <div className="flex-1 flex gap-4 items-center justify-start">
-          {showBackButton ? <BackButton /> : <NavLogo />}
+        <div className="min-w-0 flex-1 flex gap-4 items-center justify-start">
+          {showBackButton ? (
+            <BackButton showText={false} className="shrink-0" />
+          ) : (
+            <NavLogo />
+          )}
+
+          {isMapRequestResult && (
+            <h1
+              className="truncate text-base font-medium text-ink capitalize"
+              title={resultTitle}
+            >
+              {resultTitle}
+            </h1>
+          )}
 
           <CloudSaveStatus />
         </div>
 
-        <div className="flex-1 hidden sm:flex items-center justify-center">
+        <div
+          className={
+            isMapRequestResult
+              ? "hidden"
+              : "flex-1 hidden sm:flex items-center justify-center"
+          }
+        >
           {!isTryFairPage && !isProfilePage && !isMapRequestResult && (
             <NavBarLinks className={styles.webNavLinks} />
           )}
         </div>
 
-        <div className="hidden flex-1 items-center justify-end gap-x-6 sm:flex">
+        <div
+          className={`hidden ${isMapRequestResult ? "shrink-0" : "flex-1"} items-center justify-end gap-x-6 sm:flex`}
+        >
           {showMappingMode && <MappingMode />}
           <DesktopAuthSection
             isAuthenticated={isAuthenticated}
diff --git a/frontend/src/components/layouts/user-profile-layout.tsx b/frontend/src/components/layouts/user-profile-layout.tsx
index ab5091b96..499988669 100644
--- a/frontend/src/components/layouts/user-profile-layout.tsx
+++ b/frontend/src/components/layouts/user-profile-layout.tsx
@@ -9,7 +9,7 @@ export const UserProfileLayout = () => {
     return (
       <main className="my-6 min-w-0">
         <div className="flex min-w-0 flex-col items-start gap-4 lg:flex-row lg:gap-6">
-          <div className="w-full min-w-0 lg:w-60 lg:shrink-0 xl:w-64">
+          <div className="w-full min-w-0 lg:w-60 lg:shrink-0 xl:w-60">
             <UserSidebar />
           </div>
           <div className="w-full min-w-0 flex-1">
diff --git a/frontend/src/components/ui/button/back-button.tsx b/frontend/src/components/ui/button/back-button.tsx
index 8ffaa2940..96f2ed838 100644
--- a/frontend/src/components/ui/button/back-button.tsx
+++ b/frontend/src/components/ui/button/back-button.tsx
@@ -1,7 +1,13 @@
 import { ArrowBackIcon } from "@/components/ui/icons";
 import { useHistory } from "@/hooks/use-history";
 
-const BackButton = ({ className }: { className?: string }) => {
+const BackButton = ({
+  className,
+  showText,
+}: {
+  className?: string;
+  showText?: boolean;
+}) => {
   const { goBack } = useHistory();
   return (
     <button
@@ -10,7 +16,7 @@ const BackButton = ({ className }: { className?: string }) => {
       title="Go back"
     >
       <ArrowBackIcon className="icon md:icon-lg" />
-      <span className={`text-dark text-body-3`}>Back</span>
+      {showText && <span className={`text-dark text-body-3`}>Back</span>}
     </button>
   );
 };
diff --git a/frontend/src/features/try-fair/components/advanced-settings-panel.tsx b/frontend/src/features/try-fair/components/advanced-settings-panel.tsx
index 908c3fde1..b3063fc41 100644
--- a/frontend/src/features/try-fair/components/advanced-settings-panel.tsx
+++ b/frontend/src/features/try-fair/components/advanced-settings-panel.tsx
@@ -1,6 +1,6 @@
 import type { InferenceParam } from "@/features/try-fair/api/stac";
 import { CloseIcon, InfoIcon, RefreshIcon } from "@/components/ui/icons";
-import { RedoIcon, UndoIcon } from "@/components/ui/icons/undo-icon";
+// import { RedoIcon, UndoIcon } from "@/components/ui/icons/undo-icon";
 import { ToolTip } from "@/components/ui/tooltip";
 
 type AdvancedSettingsPanelProps = {
@@ -185,7 +185,7 @@ export const AdvancedSettingsPanel = ({
         </div>
 
         <div className="-mx-4 flex items-center justify-between border-t border-gray-border px-4 pt-3">
-          <div className="flex items-center gap-2">
+          {/* <div className="flex items-center gap-2">
             <button
               type="button"
               disabled
@@ -200,7 +200,7 @@ export const AdvancedSettingsPanel = ({
             >
               <UndoIcon />
             </button>
-          </div>
+          </div> */}
           <button
             type="button"
             onClick={onReset}
diff --git a/frontend/src/features/try-fair/components/map/__tests__/prediction-confidence.test.tsx b/frontend/src/features/try-fair/components/map/__tests__/prediction-confidence.test.tsx
new file mode 100644
index 000000000..865a43c3c
--- /dev/null
+++ b/frontend/src/features/try-fair/components/map/__tests__/prediction-confidence.test.tsx
@@ -0,0 +1,126 @@
+import { act, cleanup, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { Map as MapLibreMap, MapMouseEvent } from "maplibre-gl";
+import { TryFairPredictionsLayer } from "@/features/try-fair/components/map/try-fair-prediction-results";
+import { TryFairMapOutputType } from "@/enums";
+
+const params = vi.hoisted(() => ({
+  mappingMode: "advanced",
+  isAuthenticated: true,
+}));
+vi.mock("@/app/providers/auth-provider", () => ({ useAuth: () => params }));
+vi.mock("@/features/try-fair/hooks/use-try-fair-params", () => ({
+  useTryFairParams: () => params,
+}));
+
+beforeEach(() => {
+  params.mappingMode = "advanced";
+  params.isAuthenticated = true;
+});
+afterEach(cleanup);
+
+function setup(outputType: TryFairMapOutputType, score: number | null = 0.87) {
+  const handlers = new Map<string, (event: MapMouseEvent) => void>();
+  const canvas = { style: { cursor: "" } };
+  const map = {
+    getStyle: () => null,
+    getCanvas: () => canvas,
+    queryRenderedFeatures: () => [{ properties: { score, count: 12 } }],
+    on: (
+      event: string,
+      layer: string,
+      handler: (event: MapMouseEvent) => void,
+    ) => {
+      handlers.set(`${event}:${layer}`, handler);
+    },
+    off: (event: string, layer: string) => {
+      handlers.delete(`${event}:${layer}`);
+    },
+  };
+  const props = {
+    map: map as unknown as MapLibreMap,
+    predictions: null,
+    predictionBBox: null,
+    outputType,
+  };
+  const view = render(<TryFairPredictionsLayer {...props} />);
+  return {
+    ...view,
+    signOut: () => {
+      params.isAuthenticated = false;
+      view.rerender(<TryFairPredictionsLayer {...props} />);
+    },
+    changeMode: (mode: string) => {
+      params.mappingMode = mode;
+      view.rerender(<TryFairPredictionsLayer {...props} />);
+    },
+    hover: () =>
+      act(() => {
+        for (const [key, handler] of handlers) {
+          if (key.startsWith("mousemove:"))
+            handler({ point: { x: 10, y: 20 } } as MapMouseEvent);
+        }
+      }),
+    leave: () =>
+      act(() => {
+        for (const [key, handler] of handlers) {
+          if (key.startsWith("mouseleave:")) handler({} as MapMouseEvent);
+        }
+      }),
+  };
+}
+
+describe("prediction confidence tooltip", () => {
+  it.each([TryFairMapOutputType.POLYGON, TryFairMapOutputType.POINTS])(
+    "shows confidence in Advanced mode for %s and clears it on mouse leave",
+    (outputType) => {
+      const view = setup(outputType);
+      view.hover();
+      expect(screen.getByText("Confidence")).toBeInTheDocument();
+      expect(screen.getByText("87.0%")).toBeInTheDocument();
+      view.leave();
+      expect(screen.queryByText("Confidence")).not.toBeInTheDocument();
+    },
+  );
+  it("updates visibility when switching between Basic and Advanced", () => {
+    params.mappingMode = "basic";
+    const view = setup(TryFairMapOutputType.POLYGON);
+    view.hover();
+    expect(screen.queryByText("Confidence")).not.toBeInTheDocument();
+    view.changeMode("advanced");
+    view.hover();
+    expect(screen.getByText("Confidence")).toBeInTheDocument();
+    view.changeMode("basic");
+    expect(screen.queryByText("Confidence")).not.toBeInTheDocument();
+  });
+  it("hides confidence for unauthenticated users even in Advanced mode", () => {
+    params.isAuthenticated = false;
+    setup(TryFairMapOutputType.POLYGON).hover();
+    expect(screen.queryByText("Confidence")).not.toBeInTheDocument();
+  });
+
+  it("clears the confidence tooltip when the user signs out", () => {
+    const view = setup(TryFairMapOutputType.POINTS);
+    view.hover();
+    expect(screen.getByText("Confidence")).toBeInTheDocument();
+    view.signOut();
+    expect(screen.queryByText("Confidence")).not.toBeInTheDocument();
+    view.hover();
+    expect(screen.queryByText("Confidence")).not.toBeInTheDocument();
+  });
+
+  it("shows zero confidence without inventing a score for missing values", () => {
+    const view = setup(TryFairMapOutputType.POLYGON, 0);
+    view.hover();
+    expect(screen.getByText("0.0%")).toBeInTheDocument();
+    view.unmount();
+    setup(TryFairMapOutputType.POLYGON, null).hover();
+    expect(screen.queryByText("Confidence")).not.toBeInTheDocument();
+  });
+  it("keeps cluster counts available in Basic mode", () => {
+    params.mappingMode = "basic";
+    setup(TryFairMapOutputType.CLUSTER).hover();
+    expect(screen.getByText("Features detected")).toBeInTheDocument();
+    expect(screen.getByText("12")).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/features/try-fair/components/map/draggable-grid.tsx b/frontend/src/features/try-fair/components/map/draggable-grid.tsx
index 1de2cf23c..99b6fbb40 100644
--- a/frontend/src/features/try-fair/components/map/draggable-grid.tsx
+++ b/frontend/src/features/try-fair/components/map/draggable-grid.tsx
@@ -1,3 +1,4 @@
+import { useAuth } from "@/app/providers/auth-provider";
 import { RefObject, useEffect, useMemo, useState } from "react";
 import { Map } from "maplibre-gl";
 import useScreenSize from "@/hooks/use-screen-size";
@@ -62,6 +63,8 @@ export const TryFairDraggableGrid = ({
 
   const { isSmallViewport } = useScreenSize();
   const { mappingMode } = useTryFairParams();
+  const { isAuthenticated } = useAuth();
+  const showConfidence = isAuthenticated && mappingMode === "advanced";
   const [isNoResultsDismissed, setIsNoResultsDismissed] = useState(false);
 
   const { anchor, setAnchor, tileZoom } = useTileGrid({
@@ -112,6 +115,10 @@ export const TryFairDraggableGrid = ({
 
   const [hoverTooltip, setHoverTooltip] = useState<HoverTooltip>(null);
 
+  useEffect(() => {
+    setHoverTooltip(null);
+  }, [showConfidence, outputType]);
+
   //  Screen projection
 
   const screenGeometry = useGridScreenGeometry({
@@ -235,7 +242,7 @@ export const TryFairDraggableGrid = ({
 
     const score = feature[0].properties?.score;
     // The per-feature confidence tooltip is an advanced-mode only affordance.
-    if (typeof score !== "number" || mappingMode !== "advanced") {
+    if (typeof score !== "number" || !showConfidence) {
       setHoverTooltip(null);
       return;
     }
diff --git a/frontend/src/features/try-fair/components/map/try-fair-prediction-results.tsx b/frontend/src/features/try-fair/components/map/try-fair-prediction-results.tsx
index 4f1a23ae8..772f57423 100644
--- a/frontend/src/features/try-fair/components/map/try-fair-prediction-results.tsx
+++ b/frontend/src/features/try-fair/components/map/try-fair-prediction-results.tsx
@@ -1,3 +1,5 @@
+import { useTryFairParams } from "@/features/try-fair/hooks/use-try-fair-params";
+import { useAuth } from "@/app/providers/auth-provider";
 import { TryFairMapOutputType } from "@/enums/try-fair";
 import { BBOX } from "@/types";
 import { ExpressionSpecification, Map, MapMouseEvent } from "maplibre-gl";
@@ -71,6 +73,9 @@ export const TryFairPredictionsLayer = ({
   onChoroplethBucketsChange,
   classStyle,
 }: Props) => {
+  const { mappingMode } = useTryFairParams();
+  const { isAuthenticated } = useAuth();
+  const showConfidence = isAuthenticated && mappingMode === "advanced";
   const { choropleth, buckets } = useMemo(() => {
     if (
       outputType !== TryFairMapOutputType.CLUSTER ||
@@ -287,7 +292,7 @@ export const TryFairPredictionsLayer = ({
         : outputType === TryFairMapOutputType.POLYGON
           ? FILL_LAYER
           : null;
-    if (!map || !predictionLayer) {
+    if (!map || !predictionLayer || !showConfidence) {
       setTooltip(null);
       return;
     }
@@ -326,7 +331,7 @@ export const TryFairPredictionsLayer = ({
       map.getCanvas().style.cursor = "";
       setTooltip(null);
     };
-  }, [map, outputType]);
+  }, [map, outputType, showConfidence]);
 
   if (!tooltip) return null;
 
diff --git a/frontend/src/features/try-fair/components/prediction-history-button.tsx b/frontend/src/features/try-fair/components/prediction-history-button.tsx
index 2d26af9f5..338d9d634 100644
--- a/frontend/src/features/try-fair/components/prediction-history-button.tsx
+++ b/frontend/src/features/try-fair/components/prediction-history-button.tsx
@@ -22,7 +22,7 @@ export function PredictionHistoryButton() {
             : "flex items-center  p-1 text-dark hover:text-primary"
         }
       >
-        <HistoryIcon />
+        <HistoryIcon className="size-6" />
       </button>
     </ToolTip>
   );
diff --git a/frontend/src/features/user-profile/components/map-requests/map-requests-actions-menu.tsx b/frontend/src/features/user-profile/components/map-requests/map-requests-actions-menu.tsx
index 5b82afe66..cd93b9704 100644
--- a/frontend/src/features/user-profile/components/map-requests/map-requests-actions-menu.tsx
+++ b/frontend/src/features/user-profile/components/map-requests/map-requests-actions-menu.tsx
@@ -1,10 +1,10 @@
 import { DropDown } from "@/components/ui/dropdown";
 import { DropdownMenuItem } from "@/components/ui/dropdown/dropdown";
 import { ElipsisIcon } from "@/components/ui/icons";
-import { BASE_API_URL } from "@/config";
+// import { BASE_API_URL } from "@/config";
 import { DropdownPlacement, PredictionRequestStatus } from "@/enums";
 import useCopyToClipboard from "@/hooks/use-clipboard";
-import { API_ENDPOINTS } from "@/services";
+// import { API_ENDPOINTS } from "@/services";
 import { TOfflinePrediction } from "@/types";
 import { downloadFileAs, showSuccessToast } from "@/utils";
 
@@ -26,8 +26,8 @@ export const MapRequestsActionsMenu = ({
   const { copyToClipboard } = useCopyToClipboard();
 
   const resultReady = hasResults(prediction);
-  const resultLink =
-    BASE_API_URL + API_ENDPOINTS.DOWNLOAD_PREDICTION_LABELS_FILE(prediction.id);
+  // const resultLink =
+  //   BASE_API_URL + API_ENDPOINTS.DOWNLOAD_PREDICTION_LABELS_FILE(prediction.id);
 
   const menuItems: DropdownMenuItem[] = [
     {
@@ -41,15 +41,15 @@ export const MapRequestsActionsMenu = ({
           `prediction-${prediction.id}.geojson`,
         ),
     },
-    {
-      label: "Copy result link",
-      value: "copy-result-link",
-      disabled: !resultReady,
-      onClick: async () => {
-        await copyToClipboard(resultLink);
-        showSuccessToast("Copied result link to clipboard.");
-      },
-    },
+    // {
+    //   label: "Copy result link",
+    //   value: "copy-result-link",
+    //   disabled: !resultReady,
+    //   onClick: async () => {
+    //     await copyToClipboard(resultLink);
+    //     showSuccessToast("Copied result link to clipboard.");
+    //   },
+    // },
     ...(onCreateMapswipe
       ? [
           {
diff --git a/frontend/src/features/user-profile/components/overview/__tests__/overview-mapping.test.tsx b/frontend/src/features/user-profile/components/overview/__tests__/overview-mapping.test.tsx
index 728c368d6..1dbd0d3e1 100644
--- a/frontend/src/features/user-profile/components/overview/__tests__/overview-mapping.test.tsx
+++ b/frontend/src/features/user-profile/components/overview/__tests__/overview-mapping.test.tsx
@@ -41,7 +41,7 @@ const activity = (pid: number, name: string): SavedUserState => ({
   },
 });
 
-describe("overview mapping activities", () => {
+describe("overview mapping history", () => {
   beforeEach(() => {
     useGetUserStates.mockReturnValue({
       data: {
diff --git a/frontend/src/features/user-profile/components/overview/advanced-overview.tsx b/frontend/src/features/user-profile/components/overview/advanced-overview.tsx
index a4b90e86c..976aa93c2 100644
--- a/frontend/src/features/user-profile/components/overview/advanced-overview.tsx
+++ b/frontend/src/features/user-profile/components/overview/advanced-overview.tsx
@@ -7,9 +7,11 @@ export const AdvancedOverview = () => {
     <div className="flex flex-1 flex-col gap-y-6">
       <h1 className="text-title-2 font-medium text-dark">Overview</h1>
 
-      <div className="grid w-full min-w-0 grid-cols-[repeat(auto-fit,minmax(min(100%,28rem),1fr))] gap-4">
-        <OverviewHero />
-        <RecentActivities />
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-5">
+        <div className="min-w-0 lg:col-span-3">
+          <OverviewHero />
+        </div>
+        <RecentActivities className="lg:col-span-2" />
       </div>
 
       <MapRequestsSection title="Recent Map Requests" />
diff --git a/frontend/src/features/user-profile/components/overview/basic-overview.tsx b/frontend/src/features/user-profile/components/overview/basic-overview.tsx
index fb3be71c9..ea4684ddf 100644
--- a/frontend/src/features/user-profile/components/overview/basic-overview.tsx
+++ b/frontend/src/features/user-profile/components/overview/basic-overview.tsx
@@ -33,7 +33,7 @@ export const BasicOverview = () => {
   return (
     <div className="flex flex-col gap-y-6">
       <div className="flex flex-col gap-y-4 sm:flex-row sm:items-center sm:justify-between">
-        <h1 className="text-title-2 font-bold text-dark">Dashboard</h1>
+        <h1 className="text-title-2 font-medium text-dark">Dashboard</h1>
         <div className="flex flex-wrap items-center gap-3">
           <HeaderAction
             href={APPLICATION_ROUTES.LEARN_BASE}
@@ -49,11 +49,16 @@ export const BasicOverview = () => {
         </div>
       </div>
 
-      <div className="grid w-full min-w-0 grid-cols-[repeat(auto-fit,minmax(min(100%,28rem),1fr))] gap-4">
+      {/* <div className="grid w-full min-w-0 grid-cols-1 gap-4 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]">
         <OverviewHero />
         <RecentActivities />
+      </div> */}
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-6">
+        <div className="min-w-0 lg:col-span-4">
+          <OverviewHero />
+        </div>
+        <RecentActivities className="lg:col-span-2" />
       </div>
-
       <MapRequestsSection title="Map Requests" />
     </div>
   );
diff --git a/frontend/src/features/user-profile/components/overview/overview-hero.tsx b/frontend/src/features/user-profile/components/overview/overview-hero.tsx
index 4251c528b..a2b5a68d3 100644
--- a/frontend/src/features/user-profile/components/overview/overview-hero.tsx
+++ b/frontend/src/features/user-profile/components/overview/overview-hero.tsx
@@ -38,7 +38,7 @@ const RecentMappingSkeleton = () => (
   <section
     role="status"
     aria-label="Loading recent mapping"
-    className="contour-bg grid min-h-[410px] min-w-0 grid-cols-1 gap-4 overflow-hidden rounded-xl bg-dark p-4 font-archivo text-white sm:grid-cols-[minmax(180px,0.72fr)_minmax(0,1.5fr)]"
+    className="contour-bg grid min-h-[410px] min-w-0 grid-cols-1 gap-4 overflow-hidden rounded-xl bg-dark p-4 font-archivo text-white sm:grid-cols-[180px_minmax(0,1fr)]"
   >
     <div className="flex min-w-0 flex-col p-1">
       <p className="text-sm font-semibold">Recent Mapping</p>
@@ -90,7 +90,7 @@ export const OverviewHero = () => {
           title=""
           className="w-fit"
         >
-          <Button fontSize={"14px"} rounded capitalize={false}>
+          <Button fontSize={"14px"} className="w-fit">
             Start Mapping
           </Button>
         </Link>
diff --git a/frontend/src/features/user-profile/components/overview/recent-activities.tsx b/frontend/src/features/user-profile/components/overview/recent-activities.tsx
index 7c1b8f962..ce2affeb5 100644
--- a/frontend/src/features/user-profile/components/overview/recent-activities.tsx
+++ b/frontend/src/features/user-profile/components/overview/recent-activities.tsx
@@ -18,10 +18,7 @@ const columns: ColumnDef<SavedUserState>[] = [
     accessorKey: "state.name",
     header: "Name",
     cell: ({ row }) => (
-      <span
-        className="block max-w-[220px] truncate text-sm"
-        title={row.original.state.name}
-      >
+      <span className="block truncate text-sm" title={row.original.state.name}>
         {row.original.state.name}
       </span>
     ),
@@ -37,9 +34,12 @@ const columns: ColumnDef<SavedUserState>[] = [
           ? MapIcon
           : getFeatureIcon(label, MapIcon);
       return (
-        <span className="inline-flex min-w-[84px] items-center gap-1.5 whitespace-nowrap rounded bg-grey px-2 py-0.5 text-xs capitalize leading-4 text-white">
+        <span
+          className="inline-flex max-w-full items-center gap-1.5 rounded bg-grey px-2 py-0.5 text-xs capitalize leading-4 text-white"
+          title={label.replace(/[-_]/g, " ")}
+        >
           <Icon className="size-3 shrink-0" aria-hidden="true" />
-          {label.replace(/[-_]/g, " ")}
+          <span className="truncate">{label.replace(/[-_]/g, " ")}</span>
         </span>
       );
     },
@@ -79,7 +79,7 @@ export const RecentActivities = ({
       )}
     >
       <div className="mb-4 flex items-center justify-between">
-        <h2 className="text-sm font-semibold text-dark">Mapping Activities</h2>
+        <h2 className="text-sm font-semibold text-dark">Mapping History</h2>
         {showFilter && (
           <button
             type="button"
@@ -104,10 +104,10 @@ export const RecentActivities = ({
         </div>
       ) : isError ? (
         <p role="alert" className="py-4 text-sm text-grey">
-          Couldn't load mapping activities.
+          Couldn't load history.
         </p>
       ) : activities.length ? (
-        <div className="max-w-full overflow-x-auto [&_tbody_tr]:cursor-pointer">
+        <div className="min-w-0 max-w-full [&_table]:table-fixed [&_tbody_tr]:cursor-pointer [&_td]:p-2.5 [&_th]:h-9 [&_th]:p-2.5 [&_th:last-child]:w-[52px] [&_th:nth-child(2)]:w-[40%]">
           <DataTable
             columns={columns}
             data={activities}
diff --git a/frontend/src/features/user-profile/components/overview/recent-mapping-card.tsx b/frontend/src/features/user-profile/components/overview/recent-mapping-card.tsx
index 57fdb0a15..a9a1046ae 100644
--- a/frontend/src/features/user-profile/components/overview/recent-mapping-card.tsx
+++ b/frontend/src/features/user-profile/components/overview/recent-mapping-card.tsx
@@ -79,7 +79,7 @@ export const RecentMappingCard = ({
       : getFeatureIcon(label, MapIcon);
 
   return (
-    <section className="contour-bg grid min-h-[410px] min-w-0 grid-cols-1 gap-4 overflow-hidden rounded-xl bg-dark p-4 font-archivo text-white sm:grid-cols-[minmax(180px,0.72fr)_minmax(0,1.5fr)]">
+    <section className="contour-bg grid min-h-[410px] min-w-0 grid-cols-1 gap-4 overflow-hidden rounded-xl bg-dark p-4 font-archivo text-white sm:grid-cols-[200px_minmax(0,1fr)]">
       <div className="flex min-w-0 flex-col p-1 sm:p-1">
         <p className="text-sm font-semibold">Recent Mapping</p>
 
@@ -101,16 +101,9 @@ export const RecentMappingCard = ({
             href={getProjectPath(activity.pid)}
             nativeAnchor={false}
             title="Resume Mapping"
-            className="w-full"
+            className="w-40"
           >
-            <Button
-              rounded
-              capitalize={false}
-              size="medium"
-              fontSize="12px"
-              className="w-full
-              "
-            >
+            <Button rounded capitalize={false} size="medium" fontSize="12px">
               Resume Mapping
             </Button>
           </Link>
@@ -118,7 +111,7 @@ export const RecentMappingCard = ({
             href={APPLICATION_ROUTES.TRY_FAIR}
             nativeAnchor={false}
             title="Start New Mapping"
-            className="w-full"
+            className="w-40"
           >
             <Button
               variant={ButtonVariant.SECONDARY}
@@ -126,7 +119,6 @@ export const RecentMappingCard = ({
               capitalize={false}
               size="medium"
               fontSize="12px"
-              className="w-full"
             >
               Start New Mapping
             </Button>
diff --git a/frontend/src/features/user-profile/components/page-empty-state.tsx b/frontend/src/features/user-profile/components/page-empty-state.tsx
index 430f415a2..ccd4808ed 100644
--- a/frontend/src/features/user-profile/components/page-empty-state.tsx
+++ b/frontend/src/features/user-profile/components/page-empty-state.tsx
@@ -18,7 +18,7 @@ const PageEmptyState = ({
   return (
     <div className="flex flex-col space-y-4 jusitfy-center items-center ">
       <ProfileEmptyStateIcon />
-      <h1 className="text-lg text-dark font-semibold">{heading}</h1>
+      <h1 className="text-title-2 font-medium text-dark">{heading}</h1>
       <p className="text-center text-sm text-grey max-w-sm">{subHeading}</p>
 
       {ctaText && ctaHref && (
diff --git a/frontend/src/features/user-profile/components/profile-section-header.tsx b/frontend/src/features/user-profile/components/profile-section-header.tsx
index dedf76c42..f24e73825 100644
--- a/frontend/src/features/user-profile/components/profile-section-header.tsx
+++ b/frontend/src/features/user-profile/components/profile-section-header.tsx
@@ -18,9 +18,7 @@ export const ProfileSectionHeader = ({
   };
   return (
     <div className="flex justify-between items-center">
-      <h1 className="font-semibold text-title-3 md:text-title-2 self-start">
-        {title}
-      </h1>
+      <h1 className="text-title-2 font-medium text-dark">{title}</h1>
       {createRoute && createButtonAlt && (
         <ButtonWithIcon
           onClick={handleClick}

From f7f4017bb92610f5118fa87773390ba14dfa9f55 Mon Sep 17 00:00:00 2001
From: shittu adewale <sheriffhardewale@gmail.com>
Date: Tue, 27 Oct 2026 09:58:51 +0100
Subject: [PATCH 2/5] fix: update import paths for OverviewHero and
 RecentActivities components

---
 .../src/features/try-fair/components/try-fair-sidebar.tsx     | 2 +-
 .../user-profile/components/overview/basic-overview.tsx       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/try-fair/components/try-fair-sidebar.tsx b/frontend/src/features/try-fair/components/try-fair-sidebar.tsx
index 2c9b98b3a..643d694ef 100644
--- a/frontend/src/features/try-fair/components/try-fair-sidebar.tsx
+++ b/frontend/src/features/try-fair/components/try-fair-sidebar.tsx
@@ -3,7 +3,7 @@ import {
   TryFairMapOutputType,
   TryFairResolution,
 } from "@/enums";
-import { ModelPicker } from "./model-picker-modal";
+import { ModelPicker } from "@/features/try-fair/components/model-picker-modal";
 import { TRY_FAIR_PAGE_CONTENT } from "@/constants/ui-contents/try-fair-contents";
 import { APP_TOUR_IDS } from "@/constants/site-tour";
 import { Button } from "@/components/ui/button";
diff --git a/frontend/src/features/user-profile/components/overview/basic-overview.tsx b/frontend/src/features/user-profile/components/overview/basic-overview.tsx
index ea4684ddf..ac590acb2 100644
--- a/frontend/src/features/user-profile/components/overview/basic-overview.tsx
+++ b/frontend/src/features/user-profile/components/overview/basic-overview.tsx
@@ -2,8 +2,8 @@ import { LegendBookIcon } from "@/components/ui/icons";
 import { Link } from "@/components/ui/link";
 import { APPLICATION_ROUTES } from "@/constants/routes";
 import { MapRequestsSection } from "./map-requests-section";
-import { OverviewHero } from "./overview-hero";
-import { RecentActivities } from "./recent-activities";
+import { OverviewHero } from "@/features/user-profile/components/overview/overview-hero";
+import { RecentActivities } from "@/features/user-profile/components/overview/recent-activities";
 import { GlobeIcon } from "@/components/ui/icons/globe-icon";
 
 const HeaderAction = ({

From be730b3f455fdb78f397690eb166c4414776ff1a Mon Sep 17 00:00:00 2001
From: shittu adewale <sheriffhardewale@gmail.com>
Date: Tue, 27 Oct 2026 10:05:59 +0100
Subject: [PATCH 3/5] feat: update polygon outline color

---
 .../try-fair-prediction-results.test.tsx      | 89 +++++++++++++++++++
 .../map/try-fair-prediction-results.tsx       |  2 +-
 2 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/features/try-fair/components/map/__tests__/try-fair-prediction-results.test.tsx

diff --git a/frontend/src/features/try-fair/components/map/__tests__/try-fair-prediction-results.test.tsx b/frontend/src/features/try-fair/components/map/__tests__/try-fair-prediction-results.test.tsx
new file mode 100644
index 000000000..22fb6ae10
--- /dev/null
+++ b/frontend/src/features/try-fair/components/map/__tests__/try-fair-prediction-results.test.tsx
@@ -0,0 +1,89 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { Map as MapLibreMap } from "maplibre-gl";
+import { TryFairPredictionsLayer } from "@/features/try-fair/components/map/try-fair-prediction-results";
+import { TryFairMapOutputType } from "@/enums";
+import type { PredictionClassStyle } from "@/features/try-fair/utils/prediction-classes";
+
+vi.mock("@/features/try-fair/hooks/use-try-fair-params", () => ({
+  useTryFairParams: () => ({ mappingMode: "basic" }),
+}));
+vi.mock("@/app/providers/auth-provider", () => ({
+  useAuth: () => ({ isAuthenticated: true }),
+}));
+
+afterEach(cleanup);
+
+function renderPolygon(classStyle?: PredictionClassStyle) {
+  const map = {
+    getStyle: () => ({}),
+    getLayer: vi.fn(),
+    getSource: vi.fn(),
+    addSource: vi.fn(),
+    addLayer: vi.fn(),
+    removeLayer: vi.fn(),
+    removeSource: vi.fn(),
+  };
+  const predictions: GeoJSON.FeatureCollection = {
+    type: "FeatureCollection",
+    features: [
+      {
+        type: "Feature",
+        properties: { class: 1 },
+        geometry: {
+          type: "Polygon",
+          coordinates: [
+            [
+              [0, 0],
+              [1, 0],
+              [1, 1],
+              [0, 0],
+            ],
+          ],
+        },
+      },
+    ],
+  };
+  render(
+    <TryFairPredictionsLayer
+      map={map as unknown as MapLibreMap}
+      predictions={predictions}
+      predictionBBox={null}
+      outputType={TryFairMapOutputType.POLYGON}
+      classStyle={classStyle}
+    />,
+  );
+  return map;
+}
+
+describe("TryFairPredictionsLayer polygon outline", () => {
+  it("uses the class colours when the model declares them", () => {
+    const map = renderPolygon({
+      property: "class",
+      colored: true,
+      variables: [],
+      classes: [
+        { value: 1, label: "Building", color: "#ff0000", nodata: false },
+      ],
+    });
+    expect(map.addLayer).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "try-fair-predictions-outline",
+        paint: {
+          "line-color": ["match", ["get", "class"], 1, "#ff0000", "#A243DC"],
+          "line-width": 1.5,
+        },
+      }),
+    );
+  });
+
+  it("keeps the default prediction colour without class colours", () => {
+    const map = renderPolygon();
+    expect(map.addLayer).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "try-fair-predictions-outline",
+        paint: { "line-color": "#A243DC", "line-width": 1.5 },
+      }),
+    );
+  });
+});
diff --git a/frontend/src/features/try-fair/components/map/try-fair-prediction-results.tsx b/frontend/src/features/try-fair/components/map/try-fair-prediction-results.tsx
index 772f57423..e6fe0c536 100644
--- a/frontend/src/features/try-fair/components/map/try-fair-prediction-results.tsx
+++ b/frontend/src/features/try-fair/components/map/try-fair-prediction-results.tsx
@@ -139,7 +139,7 @@ export const TryFairPredictionsLayer = ({
         id: OUTLINE_LAYER,
         type: "line",
         source: SOURCE_ID,
-        paint: { "line-color": "#A243DC", "line-width": 1.5 },
+        paint: { "line-color": polygonFillColor, "line-width": 1.5 },
       });
 
       // ── Points ───────────────────────────────────────────────────────────────

From bf5a21d64a14a58f8aa76cb4e570257887d4410f Mon Sep 17 00:00:00 2001
From: shittu adewale <sheriffhardewale@gmail.com>
Date: Tue, 27 Oct 2026 10:13:26 +0100
Subject: [PATCH 4/5] feat: refactor TryFairPredictionsLayer tests to improve
 structure and add color expression handling

---
 .../try-fair-prediction-results.test.tsx      | 118 +++++++++---------
 1 file changed, 62 insertions(+), 56 deletions(-)

diff --git a/frontend/src/features/try-fair/components/map/__tests__/try-fair-prediction-results.test.tsx b/frontend/src/features/try-fair/components/map/__tests__/try-fair-prediction-results.test.tsx
index 22fb6ae10..231f5d682 100644
--- a/frontend/src/features/try-fair/components/map/__tests__/try-fair-prediction-results.test.tsx
+++ b/frontend/src/features/try-fair/components/map/__tests__/try-fair-prediction-results.test.tsx
@@ -1,9 +1,13 @@
 import { cleanup, render } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import type { Map as MapLibreMap } from "maplibre-gl";
+import type { Map } from "maplibre-gl";
+import { TryFairMapOutputType } from "@/enums/try-fair";
 import { TryFairPredictionsLayer } from "@/features/try-fair/components/map/try-fair-prediction-results";
-import { TryFairMapOutputType } from "@/enums";
-import type { PredictionClassStyle } from "@/features/try-fair/utils/prediction-classes";
+import {
+  buildClassColorExpression,
+  DEFAULT_PREDICTION_COLOR,
+  type PredictionClassStyle,
+} from "@/features/try-fair/utils/prediction-classes";
 
 vi.mock("@/features/try-fair/hooks/use-try-fair-params", () => ({
   useTryFairParams: () => ({ mappingMode: "basic" }),
@@ -12,78 +16,80 @@ vi.mock("@/app/providers/auth-provider", () => ({
   useAuth: () => ({ isAuthenticated: true }),
 }));
 
-afterEach(cleanup);
+const predictions: GeoJSON.FeatureCollection = {
+  type: "FeatureCollection",
+  features: [
+    {
+      type: "Feature",
+      geometry: {
+        type: "Polygon",
+        coordinates: [
+          [
+            [0, 0],
+            [1, 0],
+            [1, 1],
+            [0, 0],
+          ],
+        ],
+      },
+      properties: { damage_class: 3 },
+    },
+  ],
+};
+
+const damageStyle: PredictionClassStyle = {
+  property: "damage_class",
+  colored: true,
+  variables: [],
+  classes: [
+    { value: 0, label: "No damage", color: "#43a047", nodata: false },
+    { value: 3, label: "Destroyed", color: "#e53935", nodata: false },
+  ],
+};
 
-function renderPolygon(classStyle?: PredictionClassStyle) {
+const fakeMap = () => {
+  const layers: { id: string; paint?: Record<string, unknown> }[] = [];
   const map = {
     getStyle: () => ({}),
-    getLayer: vi.fn(),
-    getSource: vi.fn(),
-    addSource: vi.fn(),
-    addLayer: vi.fn(),
+    getLayer: () => undefined,
+    getSource: () => undefined,
     removeLayer: vi.fn(),
     removeSource: vi.fn(),
+    addSource: vi.fn(),
+    addLayer: (layer: { id: string; paint?: Record<string, unknown> }) =>
+      layers.push(layer),
+    on: vi.fn(),
+    off: vi.fn(),
+    getCanvas: () => ({ style: {} }),
   };
-  const predictions: GeoJSON.FeatureCollection = {
-    type: "FeatureCollection",
-    features: [
-      {
-        type: "Feature",
-        properties: { class: 1 },
-        geometry: {
-          type: "Polygon",
-          coordinates: [
-            [
-              [0, 0],
-              [1, 0],
-              [1, 1],
-              [0, 0],
-            ],
-          ],
-        },
-      },
-    ],
-  };
+  return { map: map as unknown as Map, layers };
+};
+
+const outlineColor = (classStyle: PredictionClassStyle | null) => {
+  const { map, layers } = fakeMap();
   render(
     <TryFairPredictionsLayer
-      map={map as unknown as MapLibreMap}
+      map={map}
       predictions={predictions}
-      predictionBBox={null}
+      predictionBBox={[0, 0, 1, 1]}
       outputType={TryFairMapOutputType.POLYGON}
       classStyle={classStyle}
     />,
   );
-  return map;
-}
+  return layers.find((layer) => layer.id === "try-fair-predictions-outline")
+    ?.paint?.["line-color"];
+};
 
 describe("TryFairPredictionsLayer polygon outline", () => {
+  afterEach(cleanup);
+
   it("uses the class colours when the model declares them", () => {
-    const map = renderPolygon({
-      property: "class",
-      colored: true,
-      variables: [],
-      classes: [
-        { value: 1, label: "Building", color: "#ff0000", nodata: false },
-      ],
-    });
-    expect(map.addLayer).toHaveBeenCalledWith(
-      expect.objectContaining({
-        id: "try-fair-predictions-outline",
-        paint: {
-          "line-color": ["match", ["get", "class"], 1, "#ff0000", "#A243DC"],
-          "line-width": 1.5,
-        },
-      }),
+    expect(outlineColor(damageStyle)).toEqual(
+      buildClassColorExpression(damageStyle),
     );
   });
 
   it("keeps the default prediction colour without class colours", () => {
-    const map = renderPolygon();
-    expect(map.addLayer).toHaveBeenCalledWith(
-      expect.objectContaining({
-        id: "try-fair-predictions-outline",
-        paint: { "line-color": "#A243DC", "line-width": 1.5 },
-      }),
-    );
+    expect(outlineColor(null)).toBe(DEFAULT_PREDICTION_COLOR);
   });
 });

From c9de6387cabe8d020ca98ea13b37be2514b63995 Mon Sep 17 00:00:00 2001
From: shittu adewale <sheriffhardewale@gmail.com>
Date: Tue, 27 Oct 2026 10:34:41 +0100
Subject: [PATCH 5/5] feat: enhance layout and styling for user profile
 components

---
 frontend/src/app/routes/profile/datasets.tsx           |  2 +-
 frontend/src/app/routes/profile/models.tsx             |  2 +-
 frontend/src/components/layouts/root-layout.tsx        |  2 +-
 .../src/components/layouts/user-profile-layout.tsx     | 10 +++++-----
 .../components/overview/map-requests-table.tsx         |  2 +-
 .../components/overview/recent-activities.tsx          |  6 +++---
 .../user-profile/components/page-empty-state.tsx       |  2 +-
 .../features/user-profile/components/user-sidebar.tsx  |  2 +-
 8 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/routes/profile/datasets.tsx b/frontend/src/app/routes/profile/datasets.tsx
index 6bde7dbf5..aa4a69730 100644
--- a/frontend/src/app/routes/profile/datasets.tsx
+++ b/frontend/src/app/routes/profile/datasets.tsx
@@ -9,7 +9,7 @@ export const UserProfileDatasetsPage = () => (
     <ProfileSectionHeader
       title={USER_PROFILE_PAGE_CONTENT.datasets.sectionTitle}
     />
-    <div className="w-full flex flex-col justify-center items-center min-h-[360px] py-12">
+    <div className="flex w-full flex-1 flex-col items-center justify-center py-12">
       <PageEmptyState
         heading="Coming soon"
         subHeading="Creating and managing your own datasets is coming soon."
diff --git a/frontend/src/app/routes/profile/models.tsx b/frontend/src/app/routes/profile/models.tsx
index 9d52be787..4fc67c723 100644
--- a/frontend/src/app/routes/profile/models.tsx
+++ b/frontend/src/app/routes/profile/models.tsx
@@ -9,7 +9,7 @@ export const UserModelsPage = () => (
     <ProfileSectionHeader
       title={USER_PROFILE_PAGE_CONTENT.models.sectionTitle}
     />
-    <div className="w-full flex flex-col justify-center items-center min-h-[360px] py-12">
+    <div className="flex w-full flex-1 flex-col items-center justify-center py-12">
       <PageEmptyState
         heading="Coming soon"
         subHeading="Creating and managing your own models is coming soon."
diff --git a/frontend/src/components/layouts/root-layout.tsx b/frontend/src/components/layouts/root-layout.tsx
index 04ac7cae4..20d1c36d1 100644
--- a/frontend/src/components/layouts/root-layout.tsx
+++ b/frontend/src/components/layouts/root-layout.tsx
@@ -59,7 +59,7 @@ export const RootLayout = () => {
 
         <div
           // Disable global padding on landing page.
-          className={`flex-1 mx-auto w-full ${pathname === APPLICATION_ROUTES.HOMEPAGE ? "" : "app-padding"} ${pathname.includes(MODELS_ROUTES.CREATE_MODEL_BASE) || modelId ? "bg-frosted-blue" : ""}`}
+          className={`flex-1 mx-auto w-full ${pathname.includes(APPLICATION_ROUTES.PROFILE_BASE) ? "flex flex-col" : ""} ${pathname === APPLICATION_ROUTES.HOMEPAGE ? "" : "app-padding"} ${pathname.includes(MODELS_ROUTES.CREATE_MODEL_BASE) || modelId ? "bg-frosted-blue" : ""}`}
         >
           <Outlet />
         </div>
diff --git a/frontend/src/components/layouts/user-profile-layout.tsx b/frontend/src/components/layouts/user-profile-layout.tsx
index 499988669..cdf8b9951 100644
--- a/frontend/src/components/layouts/user-profile-layout.tsx
+++ b/frontend/src/components/layouts/user-profile-layout.tsx
@@ -7,12 +7,12 @@ export const UserProfileLayout = () => {
 
   if (mappingMode === "advanced") {
     return (
-      <main className="my-6 min-w-0">
-        <div className="flex min-w-0 flex-col items-start gap-4 lg:flex-row lg:gap-6">
-          <div className="w-full min-w-0 lg:w-60 lg:shrink-0 xl:w-60">
+      <main className="my-6 flex min-w-0 flex-1 flex-col">
+        <div className="flex min-w-0 flex-1 flex-col items-stretch gap-4 lg:flex-row lg:gap-6">
+          <div className="w-full min-w-0 lg:sticky lg:top-6 lg:max-h-[calc(100dvh-3rem)] lg:w-60 lg:shrink-0 lg:self-start lg:overflow-y-auto xl:w-60">
             <UserSidebar />
           </div>
-          <div className="w-full min-w-0 flex-1">
+          <div className="flex w-full min-w-0 flex-1 flex-col">
             <Outlet />
           </div>
         </div>
@@ -21,7 +21,7 @@ export const UserProfileLayout = () => {
   }
 
   return (
-    <main className="min-w-0 mt-6 mb-10">
+    <main className="mt-6 mb-10 flex min-w-0 flex-1 flex-col">
       <Outlet />
     </main>
   );
diff --git a/frontend/src/features/user-profile/components/overview/map-requests-table.tsx b/frontend/src/features/user-profile/components/overview/map-requests-table.tsx
index 2a1cb3a86..ad2a2d9de 100644
--- a/frontend/src/features/user-profile/components/overview/map-requests-table.tsx
+++ b/frontend/src/features/user-profile/components/overview/map-requests-table.tsx
@@ -191,7 +191,7 @@ export const MapRequestsTable = ({
   if (isPending || isError) return <TableSkeleton />;
 
   return (
-    <div className="max-w-full  overflow-auto">
+    <div className="max-w-full overflow-auto [&_th]:text-[12px] [&_th]:font-normal [&_th]:text-[#404446] [&_td]:text-[13px] [&_td]:font-medium [&_td]:text-[#404446]">
       <DataTable
         // @ts-ignore
         data={requests}
diff --git a/frontend/src/features/user-profile/components/overview/recent-activities.tsx b/frontend/src/features/user-profile/components/overview/recent-activities.tsx
index ce2affeb5..3f4d5024f 100644
--- a/frontend/src/features/user-profile/components/overview/recent-activities.tsx
+++ b/frontend/src/features/user-profile/components/overview/recent-activities.tsx
@@ -18,7 +18,7 @@ const columns: ColumnDef<SavedUserState>[] = [
     accessorKey: "state.name",
     header: "Name",
     cell: ({ row }) => (
-      <span className="block truncate text-sm" title={row.original.state.name}>
+      <span className="block truncate" title={row.original.state.name}>
         {row.original.state.name}
       </span>
     ),
@@ -35,7 +35,7 @@ const columns: ColumnDef<SavedUserState>[] = [
           : getFeatureIcon(label, MapIcon);
       return (
         <span
-          className="inline-flex max-w-full items-center gap-1.5 rounded bg-grey px-2 py-0.5 text-xs capitalize leading-4 text-white"
+          className="inline-flex max-w-full items-center gap-1.5 rounded bg-grey px-2 py-0.5 capitalize leading-4 text-white"
           title={label.replace(/[-_]/g, " ")}
         >
           <Icon className="size-3 shrink-0" aria-hidden="true" />
@@ -107,7 +107,7 @@ export const RecentActivities = ({
           Couldn't load history.
         </p>
       ) : activities.length ? (
-        <div className="min-w-0 max-w-full [&_table]:table-fixed [&_tbody_tr]:cursor-pointer [&_td]:p-2.5 [&_th]:h-9 [&_th]:p-2.5 [&_th:last-child]:w-[52px] [&_th:nth-child(2)]:w-[40%]">
+        <div className="min-w-0 max-w-full [&_table]:table-fixed [&_tbody_tr]:cursor-pointer [&_td]:p-2.5 [&_td]:text-[13px] [&_td]:font-medium [&_td]:text-[#404446] [&_th]:h-9 [&_th]:p-2.5 [&_th]:text-[12px] [&_th]:font-normal [&_th]:text-[#404446] [&_th:last-child]:w-[52px] [&_th:nth-child(2)]:w-[40%]">
           <DataTable
             columns={columns}
             data={activities}
diff --git a/frontend/src/features/user-profile/components/page-empty-state.tsx b/frontend/src/features/user-profile/components/page-empty-state.tsx
index ccd4808ed..978592fbc 100644
--- a/frontend/src/features/user-profile/components/page-empty-state.tsx
+++ b/frontend/src/features/user-profile/components/page-empty-state.tsx
@@ -16,7 +16,7 @@ const PageEmptyState = ({
 }) => {
   const navigate = useNavigate();
   return (
-    <div className="flex flex-col space-y-4 jusitfy-center items-center ">
+    <div className="flex flex-col items-center justify-center space-y-4">
       <ProfileEmptyStateIcon />
       <h1 className="text-title-2 font-medium text-dark">{heading}</h1>
       <p className="text-center text-sm text-grey max-w-sm">{subHeading}</p>
diff --git a/frontend/src/features/user-profile/components/user-sidebar.tsx b/frontend/src/features/user-profile/components/user-sidebar.tsx
index a4adaad17..52749ab10 100644
--- a/frontend/src/features/user-profile/components/user-sidebar.tsx
+++ b/frontend/src/features/user-profile/components/user-sidebar.tsx
@@ -17,7 +17,7 @@ const UserSidebar = () => {
   const { pathname } = useLocation();
 
   return (
-    <aside className="flex w-full min-w-0 flex-col gap-4 rounded-xl bg-frosted-blue p-2 shadow-sm lg:min-h-[calc(100dvh-9.75rem)] lg:gap-6 lg:py-4">
+    <aside className="flex w-full min-w-0 flex-col gap-4 rounded-xl bg-frosted-blue p-2 shadow-sm lg:min-h-[calc(100dvh-8.75rem)] lg:gap-6 lg:py-4">
       <div className="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-1">
         {SIDEBAR_LINKS.map((link) => {
           const isActive = pathname === link.href;