diff --git a/docs/decisions/frontend/architecture/adr-choose-markdown-library/adr1.md b/docs/decisions/frontend/architecture/adr-choose-markdown-library/adr1.md
new file mode 100644
index 000000000..3ef5988fd
--- /dev/null
+++ b/docs/decisions/frontend/architecture/adr-choose-markdown-library/adr1.md
@@ -0,0 +1,46 @@
+# Architecture Decision Record 1: Use react-markdown with remark-gfm for Rendering Markdown Content
+
+Date: 05/03/2026
+
+# Context
+
+The base model detail page displays long-form content (overview, use cases, performance, limitations) that was previously rendered using manual paragraph splitting and hardcoded HTML structures. As content grows in complexity — with bold text, inline code, lists, headings, and links — maintaining this as plain strings with custom rendering logic becomes difficult and error-prone.
+
+We need a solution to render rich, structured text from markdown strings so that content authors can express formatting naturally, while the UI consistently applies the project's design system.
+
+## Decision Drivers
+
+- Content flexibility: authors should be able to use headings, bold, lists, code, and links without code changes.
+- Consistency: rendered markdown must match the application's existing design system (colors, typography, spacing).
+- Minimal bundle impact: the chosen library should be lightweight and avoid unnecessary overhead.
+- Existing ecosystem: leverage libraries already present in the project wherever possible.
+- Security: HTML should be sanitised by default to prevent XSS from user-supplied content.
+
+## Considered Options
+
+- **[react-markdown](https://github.com/remarkjs/react-markdown) + [remark-gfm](https://github.com/remarkjs/remark-gfm)** — A lightweight React component that converts markdown to React elements via the unified/remark ecosystem. `remark-gfm` adds GitHub Flavored Markdown support (tables, strikethrough, task lists, autolinks). Does **not** use `dangerouslySetInnerHTML`; it builds a React virtual DOM tree. Already installed as project dependencies.
+- **[markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx)** — A single-package alternative that compiles markdown to JSX. Slightly smaller bundle size, but lacks the plugin ecosystem of remark and does not support GFM features without extra work.
+
+- **Custom rendering logic** — Continue splitting strings on `\n\n` and mapping to `<p>`, `<ul>`, `<ol>` elements manually. Does not scale as content grows in richness.
+
+# Decision
+
+We will use **react-markdown** (v9) with the **remark-gfm** plugin to render all long-form content in the frontend starting with base model detail page.
+
+Key implementation details:
+
+1. **Data model simplification**: The separate `overview`, `useCases`, `performance`, and `limitations` fields on `TBaseModelDetail` are consolidated into a single `markdownContent: string` field containing full markdown.
+2. **Styling**: The Tailwind CSS `@tailwindcss/typography` plugin's `prose` class is used as the base, with a scoped `.model-detail-prose` CSS class that overrides defaults to match the application's design tokens (colors, font sizes, spacing).
+3. **Banner isolation**: The existing banner component's `.prose *` white-text override is scoped to `.prose:not(.model-detail-prose)` so the two contexts do not conflict.
+
+# Status
+
+Accepted.
+
+# Consequences
+
+- **Positive**: Content is now authored in standard markdown, making it easier to update and maintain. Markdown supports headings, bold, italic, lists, inline code, links, and tables out of the box.
+- **Positive**: No new dependencies added — `react-markdown`, `remark-gfm`, and `@tailwindcss/typography` were already in `package.json`.
+- **Positive**: Safe by default — `react-markdown` does not use `dangerouslySetInnerHTML` and builds React elements directly.
+- **Trade-off**: Content structure is now implicit in the markdown string rather than explicit in the TypeScript type. If specific sections need to be programmatically accessed separately (e.g., extracting just the overview), parsing the markdown would be required.
+- **Trade-off**: Custom `.model-detail-prose` CSS styles need to be maintained alongside the design system. If design tokens change, these styles must be updated accordingly.
diff --git a/docs/decisions/frontend/architecture/adr-choose-url-state-library/adr1.md b/docs/decisions/frontend/architecture/adr-choose-url-state-library/adr1.md
new file mode 100644
index 000000000..d6a7ab4b3
--- /dev/null
+++ b/docs/decisions/frontend/architecture/adr-choose-url-state-library/adr1.md
@@ -0,0 +1,40 @@
+# Architecture Decision Record 1: Use nuqs for URL-based UI State Management
+
+Date: 02/03/2026
+
+# Context
+
+The frontend currently has multiple pages with search and filter controls that are reflected in URL query parameters. Historically, some pages managed this with ad-hoc utilities and manual synchronization between component state and `useSearchParams`, which increased complexity and inconsistency.
+
+We have validated `nuqs` in the start mapping flow and found it to be a performant and ergonomic approach for query-string state handling. As more pages require URL-based state, we need a consistent, typed pattern across the frontend.
+
+## Decision Drivers
+
+- Consistent URL-state behavior across routes with search and filters.
+- Better type safety and parsing for query params than manual string handling.
+- Simpler implementation and maintenance compared to custom synchronization utilities.
+- Good performance for frequent UI state updates tied to query parameters.
+- Better developer experience and readability for future feature work.
+
+## Considered Options
+
+- Continue using `react-router-dom` `useSearchParams` with custom helper utilities.
+- Use [`nuqs`](https://nuqs.dev/) as the standard query-state library.
+- Keep filter/search state only in component/global state and avoid URL synchronization.
+
+# Decision
+
+We will standardize on `nuqs` for managing URL-based state in frontend routes that need query-parameter-backed UI state (for example: search text, filters, sorting, map/list toggles, pagination, and similar controls).
+
+`react-router-dom` `useSearchParams` may still be used for simple one-off cases, but all new or refactored complex query-state flows should use `nuqs` as the default pattern.
+
+# Status
+
+Accepted.
+
+# Consequences
+
+- Query-state logic becomes more consistent and easier to reason about across pages.
+- We reduce repeated boilerplate for parsing/serializing query parameters.
+- Existing pages that use custom URL-state utilities may need incremental migration to align with this decision.
+- Team members should follow the `nuqs` pattern used in the start mapping implementation as the reference approach.
diff --git a/frontend/.husky/pre-commit b/frontend/.husky/pre-commit
index 0d6108f45..5ecd813c5 100755
--- a/frontend/.husky/pre-commit
+++ b/frontend/.husky/pre-commit
@@ -1,3 +1,3 @@
 cd frontend
 pnpm format
-pnpm build
+pnpm build
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index f01b4cb4c..c79fae168 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -32,6 +32,7 @@
     "framer-motion": "^12.19.1",
     "geojson": "^0.5.0",
     "maplibre-gl": "^5.3.1",
+    "nuqs": "^2.8.8",
     "pmtiles": "^4.3.0",
     "react": "19.1.0",
     "react-confetti-explosion": "^3.0.3",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 22a863e89..941752d8e 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -63,6 +63,9 @@ importers:
       maplibre-gl:
         specifier: ^5.3.1
         version: 5.3.1
+      nuqs:
+        specifier: ^2.8.8
+        version: 2.8.8(react-router-dom@6.26.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-router@6.26.2(react@19.1.0))(react@19.1.0)
       pmtiles:
         specifier: ^4.3.0
         version: 4.3.0
@@ -933,6 +936,9 @@ packages:
     resolution: {integrity: sha512-fB9+bPHLg5zVwPbBKEqY3ghyttkJq9RuUzFMTZKweKrNKKDMUACtI8DlMYUqNwpdZMJhf7a0xeak6vFVBSxcbQ==}
     engines: {node: '>=14.17.0'}
 
+  '@standard-schema/spec@1.0.0':
+    resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+
   '@tailwindcss/typography@0.5.15':
     resolution: {integrity: sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==}
     peerDependencies:
@@ -2578,6 +2584,27 @@ packages:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
     engines: {node: '>=0.10.0'}
 
+  nuqs@2.8.8:
+    resolution: {integrity: sha512-LF5sw9nWpHyPWzMMu9oho3r9C5DvkpmBIg4LQN78sexIzGaeRx8DWr0uy3YiFx5i2QGZN1Qqcb+OAtEVRa2bnA==}
+    peerDependencies:
+      '@remix-run/react': '>=2'
+      '@tanstack/react-router': ^1
+      next: '>=14.2.0'
+      react: '>=18.2.0 || ^19.0.0-0'
+      react-router: ^5 || ^6 || ^7
+      react-router-dom: ^5 || ^6 || ^7
+    peerDependenciesMeta:
+      '@remix-run/react':
+        optional: true
+      '@tanstack/react-router':
+        optional: true
+      next:
+        optional: true
+      react-router:
+        optional: true
+      react-router-dom:
+        optional: true
+
   nwsapi@2.2.16:
     resolution: {integrity: sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==}
 
@@ -4161,6 +4188,8 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
+  '@standard-schema/spec@1.0.0': {}
+
   '@tailwindcss/typography@0.5.15(tailwindcss@3.4.13)':
     dependencies:
       lodash.castarray: 4.4.0
@@ -6298,6 +6327,14 @@ snapshots:
 
   normalize-range@0.1.2: {}
 
+  nuqs@2.8.8(react-router-dom@6.26.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-router@6.26.2(react@19.1.0))(react@19.1.0):
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+      react: 19.1.0
+    optionalDependencies:
+      react-router: 6.26.2(react@19.1.0)
+      react-router-dom: 6.26.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+
   nwsapi@2.2.16: {}
 
   object-assign@4.1.1: {}
diff --git a/frontend/src/app/router.tsx b/frontend/src/app/router.tsx
index 3f544b69c..17471ab8f 100644
--- a/frontend/src/app/router.tsx
+++ b/frontend/src/app/router.tsx
@@ -12,6 +12,7 @@ import {
   createBrowserRouter,
 } from "react-router-dom";
 import { ModelsProvider } from "@/app/providers/models-provider";
+import { NuqsAdapter } from "nuqs/adapters/react-router/v6";
 
 const router = createBrowserRouter([
   {
@@ -54,6 +55,36 @@ const router = createBrowserRouter([
       /**
        * Models details, list and feedbacks route starts.
        */
+
+      /**
+       * Base Models routes.
+       */
+      {
+        path: APPLICATION_ROUTES.BASE_MODELS_HOME,
+        lazy: async () => {
+          const { BaseModelsPage } = await import(
+            "@/app/routes/base-models/base-models-list"
+          );
+          return {
+            Component: () => <BaseModelsPage />,
+          };
+        },
+      },
+      {
+        path: APPLICATION_ROUTES.BASE_MODEL_DETAILS,
+        lazy: async () => {
+          const { BaseModelDetailPage } = await import(
+            "@/app/routes/base-models/base-model-detail"
+          );
+          return {
+            Component: () => <BaseModelDetailPage />,
+          };
+        },
+      },
+
+      /**
+       * Base Models routes ends.
+       */
       {
         path: APPLICATION_ROUTES.MODEL_DETAILS,
         lazy: async () => {
@@ -441,5 +472,9 @@ const router = createBrowserRouter([
 ]);
 
 export const AppRouter = () => {
-  return <RouterProvider router={router} />;
+  return (
+    <NuqsAdapter>
+      <RouterProvider router={router} />
+    </NuqsAdapter>
+  );
 };
diff --git a/frontend/src/app/routes/base-models/base-model-detail.tsx b/frontend/src/app/routes/base-models/base-model-detail.tsx
new file mode 100644
index 000000000..a26c2272e
--- /dev/null
+++ b/frontend/src/app/routes/base-models/base-model-detail.tsx
@@ -0,0 +1,323 @@
+import { Head } from "@/components/seo";
+import MarkdownViewer from "@/components/shared/markdown-render";
+import { BackButton, ButtonWithIcon } from "@/components/ui/button";
+import { ChevronDownIcon, InfoIcon } from "@/components/ui/icons";
+import { DownloadIconNew } from "@/components/ui/icons/download-icon";
+import { ToolTip } from "@/components/ui/tooltip";
+import { APPLICATION_ROUTES } from "@/constants";
+import { ButtonVariant } from "@/enums";
+
+import AccuracyDisplay from "@/features/models/components/accuracy-display";
+import {
+  BASE_MODELS_DETAIL_DATA,
+  TBaseModelDetail,
+  TBaseModelVariant,
+} from "@/utils/base-model-data";
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+type TInfoRowConfig = {
+  label: string;
+  value: string;
+  tooltip?: string;
+};
+
+type TMetadataItemProps = {
+  label: string;
+  value: React.ReactNode;
+  tooltip?: string;
+};
+
+/**
+ * Collapsible section component for the right sidebar.
+ */
+const CollapsibleSection = ({
+  title,
+  children,
+  defaultOpen = true,
+}: {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
+
+  return (
+    <div className="border-b border-gray-border pb-4 mb-4 last:border-b-0">
+      <button
+        className="flex items-center justify-between w-full text-left cursor-pointer"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <h3 className="font-semibold text-body-1 text-dark">{title}</h3>
+        <ChevronDownIcon
+          className={`w-5 h-5 text-dark transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
+        />
+      </button>
+      {isOpen && <div className="mt-4">{children}</div>}
+    </div>
+  );
+};
+
+const MetadataItem = ({ label, value, tooltip }: TMetadataItemProps) => (
+  <div className="flex items-center gap-x-1">
+    <span className="text-grey">{label}: </span>
+    <span className="text-dark">{value}</span>
+    {tooltip && (
+      <ToolTip content={tooltip}>
+        <InfoIcon className="w-3.5 h-3.5 text-grey cursor-help" />
+      </ToolTip>
+    )}
+  </div>
+);
+
+/**
+ * Info row for displaying a label/value pair with an optional info tooltip.
+ */
+const InfoRow = ({
+  label,
+  value,
+  tooltip,
+}: {
+  label: string;
+  value: string;
+  tooltip?: string;
+}) => (
+  <div className="flex flex-col gap-y-1 py-2 ">
+    <div className="flex items-center gap-x-1">
+      <span className="text-grey text-body-3">{label}</span>
+      {tooltip && (
+        <ToolTip content={tooltip}>
+          <InfoIcon className="w-3.5 h-3.5 text-grey cursor-help" />
+        </ToolTip>
+      )}
+    </div>
+    <p className="text-dark text-body-3 break-words">{value}</p>
+  </div>
+);
+
+/**
+ * Variant display component.
+ */
+const VariantCard = ({ variant }: { variant: TBaseModelVariant }) => (
+  <div className="flex flex-col gap-y-2 py-3 border-b border-gray-border last:border-b-0">
+    <div className="flex flex-col gap-y-1">
+      <span className="text-grey text-body-3">Name:</span>
+      <span className="text-dark text-body-3 font-medium">{variant.name}</span>
+    </div>
+    <div className="flex flex-col gap-y-1">
+      <span className="text-grey text-body-3">Classes:</span>
+      <span className="text-dark text-body-3 font-medium">
+        {variant.classes}
+      </span>
+    </div>
+    <div className="flex flex-col gap-y-1">
+      <span className="text-grey text-body-3">Notes:</span>
+      <span className="text-dark text-body-3">{variant.notes}</span>
+    </div>
+  </div>
+);
+
+export const BaseModelDetailPage = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+
+  const model: TBaseModelDetail | undefined = useMemo(() => {
+    return BASE_MODELS_DETAIL_DATA.find((m) => String(m.id) === id);
+  }, [id]);
+
+  useEffect(() => {
+    if (!model) {
+      navigate(APPLICATION_ROUTES.NOTFOUND, {
+        replace: true,
+        state: {
+          from: APPLICATION_ROUTES.BASE_MODELS_HOME,
+          error: "base model not found",
+          buttonLabel: "Back to Base Models",
+          redirectPath: APPLICATION_ROUTES.BASE_MODELS_HOME,
+        },
+      });
+    }
+  }, [model, navigate]);
+
+  const architectureRows: TInfoRowConfig[] = model
+    ? [
+        { label: "Base Model", value: model.architecture.baseModel },
+        { label: "Head", value: model.architecture.head },
+        {
+          label: "Input",
+          value: model.architecture.input,
+          tooltip: "Input format used by the model",
+        },
+        { label: "Tile Size px", value: model.architecture.tileSizePx },
+        {
+          label: "Processing",
+          value: model.architecture.processing,
+          tooltip: "Pre-processing steps applied",
+        },
+        {
+          label: "Resize",
+          value: model.architecture.resize,
+          tooltip: "How images are resized before inference",
+        },
+        {
+          label: "Scaling",
+          value: model.architecture.scaling,
+          tooltip: "Pixel value normalization method",
+        },
+        {
+          label: "Output",
+          value: model.architecture.output,
+          tooltip: "Model output format",
+        },
+        {
+          label: "Description",
+          value: model.architecture.outputDescription,
+          tooltip: "Description of the model output",
+        },
+      ]
+    : [];
+
+  const dataInfoRows: TInfoRowConfig[] = model
+    ? [
+        {
+          label: "Sensor",
+          value: model.dataInfo.sensor,
+          tooltip: "Type of sensor used to capture imagery",
+        },
+        {
+          label: "CRS",
+          value: model.dataInfo.crs,
+          tooltip: "Coordinate Reference System",
+        },
+        {
+          label: "Spatial Extent",
+          value: model.dataInfo.spatialExtent,
+          tooltip: "Geographic coverage of training data",
+        },
+        {
+          label: "Temporal Extent",
+          value: model.dataInfo.temporalExtent,
+          tooltip: "Time period of training data",
+        },
+      ]
+    : [];
+
+  if (!model) {
+    return null;
+  }
+
+  return (
+    <>
+      <Head title={`${model.fullTitle}`} />
+      <BackButton className="mt-6" />
+
+      <div className="my-8 flex flex-col gap-y-8">
+        {/* Title + Start Mapping */}
+        <div className="flex border-b pb-8 flex-col md:flex-row items-start md:items-center justify-between gap-y-4">
+          <div className="flex flex-col gap-y-1">
+            <h1 className="font-semibold text-title-1 md:text-title-2 text-dark">
+              {model.fullTitle}
+            </h1>
+            <p className="text-grey text-body-3">Model ID: {model.dataId}</p>
+          </div>
+          <div className="self-start md:self-auto">
+            <ButtonWithIcon
+              onClick={() =>
+                navigate(`${APPLICATION_ROUTES.START_MAPPING_BASE}${model.id}`)
+              }
+              variant={ButtonVariant.PRIMARY}
+              label="Start Mapping"
+            />
+          </div>
+        </div>
+
+        {/* Metadata Row */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-body-3">
+          <div className="flex flex-col gap-y-3">
+            <MetadataItem label="Created by" value={model.createdBy} />
+            <MetadataItem label="Generated on" value={model.generatedOn} />
+            <MetadataItem label="Last Modified" value={model.lastModified} />
+          </div>
+          <div className="flex flex-col gap-y-3">
+            <MetadataItem label="Version" value={model.version} />
+            <MetadataItem
+              label="Model Weights License"
+              value={model.modelWeightsLicense}
+            />
+            <MetadataItem
+              label="Dataset License"
+              value={model.datasetLicense}
+            />
+          </div>
+          <div className="flex flex-col gap-y-3">
+            <MetadataItem
+              label="Task"
+              value={model.task}
+              tooltip="The ML task this model performs"
+            />
+            <div className="flex items-center gap-x-2">
+              <span className="text-grey">Accuracy: </span>
+              <AccuracyDisplay accuracy={model.accuracy} />
+            </div>
+            <MetadataItem
+              label="Data ID"
+              value={model.dataId}
+              tooltip="Unique dataset identifier"
+            />
+          </div>
+        </div>
+
+        {/* Download Metadata Link */}
+        <div>
+          <button className="inline-flex items-center gap-x-1 text-primary text-body-3 hover:text-primary transition-colors underline ">
+            <span className="">Download Metadata</span>
+            <DownloadIconNew className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Main Content: Two Column Layout */}
+        <div className="grid grid-cols-1 lg:grid-cols-[1fr_400px] gap-x-12 gap-y-10">
+          {/* Left Column - Overview */}
+          <MarkdownViewer content={model.markdownContent} />
+
+          {/* Right Column - Architecture Info */}
+          <div className="bg-frosted-blue border rounded-lg border-gray-border p-6 h-fit sticky top-8">
+            <CollapsibleSection title="Architecture Info" defaultOpen={true}>
+              <div className="flex flex-col">
+                {architectureRows.map((row) => (
+                  <InfoRow
+                    key={row.label}
+                    label={row.label}
+                    value={row.value}
+                    tooltip={row.tooltip}
+                  />
+                ))}
+              </div>
+            </CollapsibleSection>
+
+            <CollapsibleSection title="Variants" defaultOpen={false}>
+              <div className="flex flex-col">
+                {model.architecture.variants.map((variant, i) => (
+                  <VariantCard key={i} variant={variant} />
+                ))}
+              </div>
+            </CollapsibleSection>
+
+            <CollapsibleSection title="Data Info" defaultOpen={false}>
+              <div className="flex flex-col">
+                {dataInfoRows.map((row) => (
+                  <InfoRow
+                    key={row.label}
+                    label={row.label}
+                    value={row.value}
+                    tooltip={row.tooltip}
+                  />
+                ))}
+              </div>
+            </CollapsibleSection>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/frontend/src/app/routes/base-models/base-models-list.tsx b/frontend/src/app/routes/base-models/base-models-list.tsx
new file mode 100644
index 000000000..7eb6fcbca
--- /dev/null
+++ b/frontend/src/app/routes/base-models/base-models-list.tsx
@@ -0,0 +1,169 @@
+import { Head } from "@/components/seo";
+import { ButtonWithIcon } from "@/components/ui/button";
+import { AddIcon } from "@/components/ui/icons";
+import { SHARED_CONTENT } from "@/constants";
+import { ButtonVariant, LayoutView } from "@/enums";
+import {
+  BASE_MODELS_DATA,
+  TASK_CATEGORIES,
+  DATE_SORT_OPTIONS,
+} from "@/utils/base-model-data";
+import { useDialog } from "@/hooks/use-dialog";
+import { useMemo } from "react";
+import { parseAsString, useQueryStates } from "nuqs";
+import ContributeModelDialog from "@/features/base-models/components/contribute-model-dialog";
+import {
+  BaseModelsFilters,
+  MobileBaseModelFiltersDialog,
+} from "@/features/base-models/components";
+import {
+  BaseModelGridLayout,
+  BaseModelTableLayout,
+} from "@/features/base-models/layouts";
+
+export const BaseModelsPage = () => {
+  const { isOpened, openDialog, closeDialog } = useDialog();
+
+  const {
+    isOpened: isMobileFiltersOpen,
+    openDialog: openMobileFilters,
+    closeDialog: closeMobileFilters,
+  } = useDialog();
+  // nuqs-powered search params state
+  const [{ q: search, category, date: dateSort, layout }, setQueryStates] =
+    useQueryStates({
+      q: parseAsString.withDefault(""),
+      category: parseAsString.withDefault("all"),
+      date: parseAsString.withDefault("newest"),
+      layout: parseAsString.withDefault(LayoutView.GRID),
+    });
+  const isListView = layout === LayoutView.LIST;
+
+  // Filter and sort models
+  const filteredModels = useMemo(() => {
+    let models = [...BASE_MODELS_DATA];
+
+    // Search filter
+    if (search) {
+      const searchLower = search.toLowerCase();
+      models = models.filter(
+        (model) =>
+          model.name.toLowerCase().includes(searchLower) ||
+          model.description.toLowerCase().includes(searchLower) ||
+          model.author.toLowerCase().includes(searchLower),
+      );
+    }
+
+    // Category filter
+    if (category !== "all") {
+      models = models.filter((model) => model.task === category);
+    }
+
+    // Date sorting
+    if (dateSort === "oldest") {
+      models.reverse();
+    }
+
+    return models;
+  }, [search, category, dateSort]);
+
+  // Category dropdown items
+  const categoryMenuItems = TASK_CATEGORIES.map((cat) => ({
+    value: cat.label,
+    apiValue: cat.value,
+  }));
+
+  // Date dropdown items
+  const dateMenuItems = DATE_SORT_OPTIONS.map((opt) => ({
+    value: opt.label,
+    apiValue: opt.value,
+  }));
+
+  const selectedCategoryLabel =
+    TASK_CATEGORIES.find((c) => c.value === category)?.label || "Category";
+
+  const selectedDateLabel =
+    DATE_SORT_OPTIONS.find((d) => d.value === dateSort)?.label || "Date";
+  const toggleLayout = () => {
+    setQueryStates({
+      layout: isListView ? LayoutView.GRID : LayoutView.LIST,
+    });
+  };
+
+  const renderContent = () => {
+    if (filteredModels.length === 0) {
+      return (
+        <div className="flex flex-col items-center justify-center py-20 gap-y-4">
+          <p className="text-grey text-body-1 font-medium">No models found</p>
+          <p className="text-grey text-body-2base">
+            Try adjusting your search or filter criteria.
+          </p>
+        </div>
+      );
+    }
+
+    if (isListView) {
+      return (
+        <div className="col-span-5 overflow-x-auto">
+          <BaseModelTableLayout models={filteredModels} />
+        </div>
+      );
+    }
+
+    return <BaseModelGridLayout models={filteredModels} />;
+  };
+  return (
+    <>
+      <Head title="Base Models" />
+      <ContributeModelDialog isOpened={isOpened} closeDialog={closeDialog} />
+      <MobileBaseModelFiltersDialog
+        isOpened={isMobileFiltersOpen}
+        closeDialog={closeMobileFilters}
+        categoryMenuItems={categoryMenuItems}
+        dateMenuItems={dateMenuItems}
+        selectedCategoryLabel={selectedCategoryLabel}
+        selectedDateLabel={selectedDateLabel}
+        setCategory={(value) => setQueryStates({ category: value })}
+        setDateSort={(value) => setQueryStates({ date: value })}
+      />
+      <section className="my-10 min-h-screen">
+        {/* Header */}
+        <div className="flex flex-col gap-y-8 my-12">
+          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-y-4">
+            <h1 className="font-semibold text-title-1 text-primary md:text-large-title">
+              {SHARED_CONTENT.baseModelsPage.pageHeadingTitle}
+            </h1>
+            <div className="self-start md:self-auto">
+              <ButtonWithIcon
+                onClick={openDialog}
+                variant={ButtonVariant.PRIMARY}
+                prefixIcon={AddIcon}
+                label={SHARED_CONTENT.baseModelsPage.pageHeadingButtonText}
+              />
+            </div>
+          </div>
+          <p className="max-w-[80%] md:max-w-[50%] text-grey text-body-2base md:text-body-2">
+            {SHARED_CONTENT.baseModelsPage.pageHeadingDescription}
+          </p>
+        </div>
+
+        <BaseModelsFilters
+          search={search}
+          setSearch={(value) => setQueryStates({ q: value })}
+          categoryMenuItems={categoryMenuItems}
+          dateMenuItems={dateMenuItems}
+          selectedCategoryLabel={selectedCategoryLabel}
+          selectedDateLabel={selectedDateLabel}
+          setCategory={(value) => setQueryStates({ category: value })}
+          setDateSort={(value) => setQueryStates({ date: value })}
+          filteredModelsCount={filteredModels.length}
+          layout={layout}
+          onToggleLayout={toggleLayout}
+          onOpenMobileFilters={openMobileFilters}
+        />
+
+        {renderContent()}
+      </section>
+    </>
+  );
+};
diff --git a/frontend/src/app/routes/landing.tsx b/frontend/src/app/routes/landing.tsx
index 1e1de3a67..b592620d9 100644
--- a/frontend/src/app/routes/landing.tsx
+++ b/frontend/src/app/routes/landing.tsx
@@ -10,6 +10,7 @@ import {
   CoreFeatures,
   WhatIsFAIR,
 } from "@/components/landing";
+import { BaseModelCTA } from "@/components/landing/base-model-cta/base-model-cta";
 
 export const LandingPage = () => {
   return (
@@ -19,6 +20,7 @@ export const LandingPage = () => {
       <Kpi />
       <WhatIsFAIR />
       <TheFAIRProcess />
+      <BaseModelCTA />
       <CoreFeatures />
       <Corevalues />
       <section className="app-padding">
diff --git a/frontend/src/app/routes/not-found.tsx b/frontend/src/app/routes/not-found.tsx
index 63a1d8af6..2483c57d7 100644
--- a/frontend/src/app/routes/not-found.tsx
+++ b/frontend/src/app/routes/not-found.tsx
@@ -5,15 +5,28 @@ import { useLocation, useNavigate } from "react-router-dom";
 
 export const PageNotFound = () => {
   const location = useLocation();
+  const fromPath = location.state?.from ?? "";
+  const buttonLabelFromState = location.state?.buttonLabel;
+  const redirectPathFromState = location.state?.redirectPath;
 
-  const modelNotFound = location.state?.from.includes(
-    APPLICATION_ROUTES.MODELS,
-  );
+  const modelNotFound = fromPath.includes(APPLICATION_ROUTES.MODELS);
 
-  const trainingDatasetNotFound = location.state?.from.includes(
+  const trainingDatasetNotFound = fromPath.includes(
     APPLICATION_ROUTES.DATASETS,
   );
 
+  const fallbackRedirectPath = modelNotFound
+    ? APPLICATION_ROUTES.MODELS
+    : trainingDatasetNotFound
+      ? APPLICATION_ROUTES.DATASETS
+      : APPLICATION_ROUTES.HOMEPAGE;
+
+  const fallbackButtonLabel = modelNotFound
+    ? SHARED_CONTENT.pageNotFound.actionButtons.modelNotFound
+    : trainingDatasetNotFound
+      ? SHARED_CONTENT.pageNotFound.actionButtons.trainingDatasetNotFound
+      : SHARED_CONTENT.pageNotFound.actionButtons.pageNotFound;
+
   const navigate = useNavigate();
 
   return (
@@ -66,22 +79,11 @@ export const PageNotFound = () => {
         </h1>
         <Button
           onClick={() => {
-            navigate(
-              modelNotFound
-                ? APPLICATION_ROUTES.MODELS
-                : trainingDatasetNotFound
-                  ? APPLICATION_ROUTES.DATASETS
-                  : APPLICATION_ROUTES.HOMEPAGE,
-            );
+            navigate(redirectPathFromState ?? fallbackRedirectPath);
           }}
           className="max-w-[300px]"
         >
-          {modelNotFound
-            ? SHARED_CONTENT.pageNotFound.actionButtons.modelNotFound
-            : trainingDatasetNotFound
-              ? SHARED_CONTENT.pageNotFound.actionButtons
-                  .trainingDatasetNotFound
-              : SHARED_CONTENT.pageNotFound.actionButtons.pageNotFound}
+          {buttonLabelFromState ?? fallbackButtonLabel}
         </Button>
       </section>
     </>
diff --git a/frontend/src/assets/images/base_model_cta_image.png b/frontend/src/assets/images/base_model_cta_image.png
new file mode 100644
index 000000000..29502cd5a
Binary files /dev/null and b/frontend/src/assets/images/base_model_cta_image.png differ
diff --git a/frontend/src/assets/images/index.ts b/frontend/src/assets/images/index.ts
index 81dfe28cc..163f020fc 100644
--- a/frontend/src/assets/images/index.ts
+++ b/frontend/src/assets/images/index.ts
@@ -15,5 +15,6 @@ export { default as BeginnerCourseImage } from "@/assets/images/beginner_course.
 export { default as IntermediateCourseImage } from "@/assets/images/intermediate_course.png";
 export { default as AdvancedCourseImage } from "@/assets/images/advanced_course.png";
 export { default as UpdateCoverImage } from "@/assets/images/cover.png";
+export { default as BaseModelCTAImage } from "@/assets/images/base_model_cta_image.png";
 
 export { default as fAIrSwipeIllustration } from "@/assets/images/fairswipe_illustration.png";
diff --git a/frontend/src/components/landing/base-model-cta/base-model-cta.module.css b/frontend/src/components/landing/base-model-cta/base-model-cta.module.css
new file mode 100644
index 000000000..644bf5819
--- /dev/null
+++ b/frontend/src/components/landing/base-model-cta/base-model-cta.module.css
@@ -0,0 +1,147 @@
+.container {
+  padding: 0;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 100px;
+  background-image: url("../../../assets/svgs/contour_background.svg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: var(--hot-fair-color-primary);
+  overflow: hidden;
+  position: relative;
+  min-height: 439px;
+}
+
+.container .cta {
+  padding: 40px var(--sl-spacing-large);
+  width: 100%;
+  justify-content: center;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+}
+
+.ctaContent {
+  padding: var(--sl-spacing-large) 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-spacing-medium);
+  justify-content: start;
+  height: 100%;
+  width: 100%;
+}
+
+.ctaButtonContainer {
+  max-width: 213px;
+  width: 70%;
+  padding-top: var(--sl-spacing-medium);
+}
+
+.container .cta h1 {
+  font-size: var(--hot-fair-font-size-title-2);
+  font-weight: var(--hot-fair-font-weight-semibold);
+  color: white;
+  line-height: 1.2;
+}
+
+.container .cta p {
+  font-size: var(--hot-fair-font-size-body-text-2base);
+  font-weight: var(--hot-fair-font-weight-regular);
+  color: var(--hot-fair-color-secondary);
+  line-height: 1.5;
+  max-width: 420px;
+}
+
+.imageBlock {
+  width: 300px;
+  position: absolute;
+  right: -180px;
+  bottom: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.image {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+
+/* md: */
+@media (min-width: 768px) {
+  .container {
+    padding: 0 var(--hot-fair-spacing-extra-large);
+    min-height: 320px;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: row;
+    gap: var(--hot-fair-spacing-extra-large);
+  }
+
+  .ctaContent {
+    justify-content: center;
+  }
+
+  .container .cta {
+    padding: 40px 0;
+    color: var(--hot-fair-color-dark);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 50%;
+    flex-shrink: 0;
+  }
+
+  .container .cta h1 {
+    font-size: var(--hot-fair-font-size-title-3);
+  }
+
+  .imageBlock {
+    position: relative;
+    width: 50%;
+    right: 0;
+    bottom: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: unset;
+  }
+
+  .image {
+    height: auto;
+    object-fit: contain;
+    max-width: 460px;
+  }
+}
+
+/* lg: */
+@media (min-width: 1024px) {
+  .container {
+    min-height: 340px;
+  }
+
+  .ctaContent {
+    width: 90%;
+  }
+
+  .container .cta h1 {
+    font-size: var(--hot-fair-font-size-large-title);
+  }
+
+  .container .cta p {
+    font-size: var(--hot-fair-font-size-body-text-2);
+  }
+
+  .image {
+    max-width: 500px;
+  }
+}
diff --git a/frontend/src/components/landing/base-model-cta/base-model-cta.tsx b/frontend/src/components/landing/base-model-cta/base-model-cta.tsx
new file mode 100644
index 000000000..d6138871f
--- /dev/null
+++ b/frontend/src/components/landing/base-model-cta/base-model-cta.tsx
@@ -0,0 +1,38 @@
+import styles from "./base-model-cta.module.css";
+import { Button } from "@/components/ui/button/";
+import { BaseModelCTAImage } from "@/assets/images";
+import { Image } from "@/components/ui/image";
+import { Link } from "@/components/ui/link";
+import { SHARED_CONTENT } from "@/constants";
+import { ButtonVariant } from "@/enums";
+
+export const BaseModelCTA = () => {
+  return (
+    <section className={`${styles.container}`}>
+      <div className={styles.cta}>
+        <div className={styles.ctaContent}>
+          <h1> {SHARED_CONTENT.homepage.baseModelCTA.title}</h1>
+          <p>{SHARED_CONTENT.homepage.baseModelCTA.description}</p>
+        </div>
+        <div className={styles.ctaButtonContainer}>
+          <Link
+            href={SHARED_CONTENT.homepage.baseModelCTA.ctaLink}
+            title={SHARED_CONTENT.homepage.baseModelCTA.ctaButton}
+            nativeAnchor
+          >
+            <Button variant={ButtonVariant.SECONDARY}>
+              {SHARED_CONTENT.homepage.baseModelCTA.ctaButton}
+            </Button>
+          </Link>
+        </div>
+      </div>
+      <div className={styles.imageBlock}>
+        <Image
+          src={BaseModelCTAImage}
+          alt={SHARED_CONTENT.homepage.baseModelCTA.title}
+          className={styles.image}
+        />
+      </div>
+    </section>
+  );
+};
diff --git a/frontend/src/components/shared/markdown-render.tsx b/frontend/src/components/shared/markdown-render.tsx
new file mode 100644
index 000000000..4525ad63c
--- /dev/null
+++ b/frontend/src/components/shared/markdown-render.tsx
@@ -0,0 +1,20 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+type MarkdownViewerProps = {
+  content: string;
+  className?: string;
+};
+
+const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
+  content,
+  className = "",
+}) => {
+  return (
+    <div className={`prose model-detail-prose max-w-none ${className}`}>
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+    </div>
+  );
+};
+
+export default MarkdownViewer;
diff --git a/frontend/src/components/ui/icons/download-icon.tsx b/frontend/src/components/ui/icons/download-icon.tsx
index a4cc9407a..d9417f5be 100644
--- a/frontend/src/components/ui/icons/download-icon.tsx
+++ b/frontend/src/components/ui/icons/download-icon.tsx
@@ -14,3 +14,19 @@ export const DownloadIcon: React.FC<IconProps> = (props) => (
     />
   </svg>
 );
+
+export const DownloadIconNew = (props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    fill="none"
+    {...props}
+    viewBox="0 0 20 20"
+  >
+    <path
+      fill="#D63F40"
+      d="M15.244 16.497a.75.75 0 0 1 .102 1.493l-.102.007H4.75a.75.75 0 0 1-.102-1.493l.102-.007zM10.004 2a.75.75 0 0 1 .742.648l.007.102v10.193l2.966-2.97a.75.75 0 0 1 .976-.074l.085.072a.75.75 0 0 1 .073.977l-.072.084-4.243 4.25-.07.063-.092.059-.036.021-.091.038-.12.03-.07.008-.06.002a.7.7 0 0 1-.151-.016l-.08-.023a.7.7 0 0 1-.258-.146l-4.29-4.285a.75.75 0 0 1 .976-1.134l.084.073 2.973 2.967V2.749a.75.75 0 0 1 .75-.75"
+    ></path>
+  </svg>
+);
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
index c29be2e37..ac86c13c1 100644
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -27,6 +27,11 @@ export const APPLICATION_ROUTES = {
   MODEL_DETAILS: `${MODELS_BASE}/:id`,
   MODEL_FEEDBACKS: `${MODELS_BASE}/:id/feedbacks`,
 
+  // base-model start
+  BASE_MODELS_HOME: "/base-models",
+  BASE_MODEL_DETAILS: "/base-models/:id",
+  // base-model end
+
   // Model routes start
 
   CREATE_NEW_MODEL: `${MODELS_ROUTES.CREATE_MODEL_BASE}/${MODELS_ROUTES.DETAILS}`,
diff --git a/frontend/src/constants/ui-contents/shared-content.ts b/frontend/src/constants/ui-contents/shared-content.ts
index 3be718a5a..073c64e57 100644
--- a/frontend/src/constants/ui-contents/shared-content.ts
+++ b/frontend/src/constants/ui-contents/shared-content.ts
@@ -138,6 +138,13 @@ export const SHARED_CONTENT: TSharedContent = {
       paragraph:
         "fAIr is a collaborative project. We welcome all types of experience to join our community on HOTOSM Slack. There is always a room for AI/ML for earth observation expertise, community engagement enthusiastic, academic researcher or student looking for an academic challenge around social impact.",
     },
+    baseModelCTA: {
+      title: "Contribute Your Base Model",
+      description:
+        "Contribute a base model to fAIr and help teams turn imagery into actionable map data, faster and more reliably.",
+      ctaButton: "Contribute",
+      ctaLink: "/base-models",
+    },
   },
   pageNotFound: {
     messages: {
@@ -152,6 +159,107 @@ export const SHARED_CONTENT: TSharedContent = {
       pageNotFound: "go to homepage",
     },
   },
+  baseModelsPage: {
+    pageHeadingTitle: "Base Models",
+    pageHeadingDescription:
+      " Each model is trained using one of the training datasets. Published models can be used to find mappable features in imagery that is similar to the training areas that dataset comes from.",
+    pageHeadingButtonText: "Contribute model",
+    contributeModelDialog: {
+      label: "Model Contribution Journey",
+      intro:
+        "Model contribution into fAIr is handled in GITHUB /fAIr-models repository. Here are high level explanation for the contribution four steps and detailed documentation is available when you go to GITHUB",
+      github: {
+        title: "Fair Model github",
+        href: "https://github.com/hotosm/fAIr-models",
+        buttonLabel: "GO TO GITHUB",
+      },
+      steps: [
+        {
+          title: "Complete Prerequisites",
+          description:
+            "Before opening a Pull Request, verify your model meets the technical and legal standards.",
+          sections: [
+            {
+              title: "Define Licenses",
+              description:
+                "AI models require three distinct licenses. You must select one for each category:",
+              listType: "unordered",
+              items: [
+                "Code License: (e.g., Apache 2.0, MIT, or GPLv3)",
+                "Weights License: (e.g., Apache 2.0, CC BY 4.0, or Custom)",
+                "Data License: (e.g., CC BY, CC BY-NC, or Custom Terms)",
+              ],
+              note: "Note: This will be automatically validated if your selections are HOT-compliant to prevent future rejection.",
+            },
+            {
+              title: "Verify Model Endpoints",
+              description:
+                "Ensure your model code includes the four mandatory API endpoints:",
+              listType: "ordered",
+              items: [
+                "Training: For model fine-tuning.",
+                "Inference: For generating predictions.",
+                "Preprocessing: For imagery preparation.",
+                "Postprocessing: For cleaning and formatting results.",
+              ],
+            },
+            {
+              title: "Define Input/Output Shape",
+              description:
+                "Clearly describe the data formats your model handles.",
+              listType: "unordered",
+              items: [
+                "Input Example: Image RGB (tiles) + GeoJSON (labels)",
+                "Output Example: GeoJSON (detections) or Mask raster (segmentation)",
+              ],
+            },
+            {
+              title: "Select Task Category",
+              description: "Choose one of the currently supported tasks:",
+              listType: "unordered",
+              items: [
+                "Semantic Segmentation",
+                "Instance Segmentation",
+                "Object Detection (Selected for this session)",
+              ],
+            },
+          ],
+        },
+        {
+          title: "Review Guidelines",
+          description:
+            "To align with our community standards, you must read and acknowledge the contribution rules.",
+        },
+        {
+          title: "Submit and Track PR",
+          description:
+            "After reviewing the guidelines and finished the prerequisites, you can now open a PR.",
+        },
+        {
+          title: "Approval & Deployment",
+          description:
+            "Your contribution enters the final review stage by the fAIr maintainers.",
+          statuses: [
+            {
+              variant: "pending",
+              label: "🟡 Pending",
+              description: "Under review by maintainers or CI is running.",
+            },
+            {
+              variant: "changes",
+              label: "🔴 Needs Changes",
+              description: "Feedback has been provided; updates are required.",
+            },
+            {
+              variant: "approved",
+              label: "🟢 Approved",
+              description: "PR is merged! Your model is now a fAIr base model.",
+            },
+          ],
+        },
+      ],
+    },
+  },
   protectedPage: {
     ctaButton: "login",
     messageParagraph: "To access this page you have to login.",
diff --git a/frontend/src/features/base-models/components/base-model-card.tsx b/frontend/src/features/base-models/components/base-model-card.tsx
new file mode 100644
index 000000000..de365bdac
--- /dev/null
+++ b/frontend/src/features/base-models/components/base-model-card.tsx
@@ -0,0 +1,48 @@
+import { Link } from "@/components/ui/link";
+import { APPLICATION_ROUTES } from "@/constants";
+import { TBaseModel } from "@/utils/base-model-data";
+import { roundNumber } from "@/utils/number-utils";
+
+type BaseModelCardProps = {
+  model: TBaseModel;
+};
+
+const BaseModelCard: React.FC<BaseModelCardProps> = ({ model }) => {
+  return (
+    <Link
+      nativeAnchor={false}
+      disableLinkStyle
+      href={`${APPLICATION_ROUTES.BASE_MODELS_HOME}/${model.id}`}
+      title={model.name}
+      className="w-full flex flex-col border border-gray-border hover:shadow-md transition-shadow duration-200 p-6 gap-y-4"
+    >
+      {/* Model Name */}
+      <h3 className="font-semibold text-title-2 text-dark">{model.name}</h3>
+
+      {/* Description */}
+      <p className="text-grey text-body-2base line-clamp-3 min-h-[60px]">
+        {model.description}
+      </p>
+
+      {/* Accuracy */}
+      <div className="flex flex-col gap-y-1">
+        <p className="text-grey text-body-3">Accuracy:</p>
+        <p className="text-dark font-bold text-title-3">
+          {roundNumber(model.accuracy)}
+        </p>
+      </div>
+
+      {/* Author & Date */}
+      <div className="flex flex-col gap-y-1 mt-auto">
+        <p className="font-semibold text-body-2base text-dark">
+          {model.author}
+        </p>
+        <p className="text-grey text-body-3">
+          Last Modified: <span className="font-bold">{model.lastModified}</span>
+        </p>
+      </div>
+    </Link>
+  );
+};
+
+export default BaseModelCard;
diff --git a/frontend/src/features/base-models/components/base-models-filters.tsx b/frontend/src/features/base-models/components/base-models-filters.tsx
new file mode 100644
index 000000000..6b61aa2e2
--- /dev/null
+++ b/frontend/src/features/base-models/components/base-models-filters.tsx
@@ -0,0 +1,166 @@
+import {
+  SearchIcon,
+  CategoryIcon,
+  ListIcon,
+  FilterIcon,
+} from "@/components/ui/icons";
+import { DropDown } from "@/components/ui/dropdown";
+import { ToolTip } from "@/components/ui/tooltip";
+import { TASK_CATEGORIES, DATE_SORT_OPTIONS } from "@/utils/base-model-data";
+import { LayoutView } from "@/enums";
+
+type TMenuItem = {
+  value: string;
+  apiValue: string;
+};
+
+type BaseModelsFiltersProps = {
+  search: string;
+  setSearch: (value: string | null) => void;
+  categoryMenuItems: TMenuItem[];
+  dateMenuItems: TMenuItem[];
+  selectedCategoryLabel: string;
+  selectedDateLabel: string;
+  setCategory: (value: string | null) => void;
+  setDateSort: (value: string | null) => void;
+  filteredModelsCount: number;
+  layout: string;
+  onToggleLayout: () => void;
+  onOpenMobileFilters: () => void;
+};
+
+const BaseModelsFilters: React.FC<BaseModelsFiltersProps> = ({
+  search,
+  setSearch,
+  categoryMenuItems,
+  dateMenuItems,
+  selectedCategoryLabel,
+  selectedDateLabel,
+  setCategory,
+  setDateSort,
+  filteredModelsCount,
+  layout,
+  onToggleLayout,
+  onOpenMobileFilters,
+}) => {
+  const isListView = layout === LayoutView.LIST;
+
+  return (
+    <div className="sticky top-0 bg-white z-10 py-1">
+      <div className="flex flex-col gap-y-1">
+        <div className="flex items-center justify-between w-full">
+          <div className="flex items-center gap-x-4 gap-y-2 flex-wrap">
+            {/* Search */}
+            <div className="flex max-w-[250px] items-center border border-gray-border">
+              <SearchIcon className="ml-2 icon-lg text-dark" />
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value || null)}
+                placeholder="Search"
+                className="w-full p-2 outline-none border-none text-body-2base"
+              />
+            </div>
+
+            {/* Category Filter — Desktop */}
+            <div className="hidden md:block border border-gray-border py-2 px-4">
+              <DropDown
+                menuItems={categoryMenuItems}
+                withCheckbox
+                handleMenuSelection={(value: string) => {
+                  const selected = TASK_CATEGORIES.find(
+                    (c) => c.label === value,
+                  );
+                  if (selected) {
+                    setCategory(
+                      selected.value === "all" ? null : selected.value,
+                    );
+                  }
+                }}
+                defaultSelectedItem={selectedCategoryLabel}
+                triggerComponent={
+                  <p className="text-sm text-dark text-nowrap">
+                    {selectedCategoryLabel}
+                  </p>
+                }
+              />
+            </div>
+
+            {/* Date Filter — Desktop */}
+            <div className="hidden md:block border border-gray-border py-2 px-4">
+              <DropDown
+                menuItems={dateMenuItems}
+                withCheckbox
+                handleMenuSelection={(value: string) => {
+                  const selected = DATE_SORT_OPTIONS.find(
+                    (d) => d.label === value,
+                  );
+                  if (selected) {
+                    setDateSort(
+                      selected.value === "newest" ? null : selected.value,
+                    );
+                  }
+                }}
+                defaultSelectedItem={selectedDateLabel}
+                triggerComponent={
+                  <p className="text-sm text-dark text-nowrap">
+                    {selectedDateLabel}
+                  </p>
+                }
+              />
+            </div>
+          </div>
+
+          {/* Right side controls */}
+          <div className="flex items-center gap-x-4">
+            {/* Mobile filter button */}
+            <div
+              role="button"
+              className="flex md:hidden border border-gray-border p-2 items-center justify-center text-dark cursor-pointer"
+              onClick={onOpenMobileFilters}
+            >
+              <FilterIcon className="icon-lg" />
+            </div>
+            {/* Desktop layout toggle */}
+            <div className="hidden md:flex items-center">
+              <ToolTip content={`Show as ${isListView ? "grid" : "list"}`}>
+                <button
+                  className="border border-gray-border p-2 flex items-center justify-center text-dark cursor-pointer"
+                  onClick={onToggleLayout}
+                >
+                  {isListView ? (
+                    <CategoryIcon className="icon-lg" />
+                  ) : (
+                    <ListIcon className="icon-lg" />
+                  )}
+                </button>
+              </ToolTip>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Model count + mobile controls */}
+      <div className="flex items-center justify-between w-full my-4">
+        <p className="font-semibold text-body-3">
+          {filteredModelsCount} Models
+        </p>
+        {/* Mobile Layout toggle */}
+        <ToolTip content={`Show as ${isListView ? "grid" : "list"}`}>
+          <button
+            className="flex md:hidden border border-gray-border p-2 items-center justify-center text-dark cursor-pointer"
+            onClick={onToggleLayout}
+          >
+            {isListView ? (
+              <CategoryIcon className="icon-lg" />
+            ) : (
+              <ListIcon className="icon-lg" />
+            )}
+          </button>
+        </ToolTip>
+      </div>
+    </div>
+  );
+};
+
+export default BaseModelsFilters;
diff --git a/frontend/src/features/base-models/components/contribute-model-dialog.tsx b/frontend/src/features/base-models/components/contribute-model-dialog.tsx
new file mode 100644
index 000000000..a71dbbdc2
--- /dev/null
+++ b/frontend/src/features/base-models/components/contribute-model-dialog.tsx
@@ -0,0 +1,180 @@
+import { Button } from "@/components/ui/button";
+import { Dialog } from "@/components/ui/dialog";
+import { ChevronDownIcon } from "@/components/ui/icons";
+import { Link } from "@/components/ui/link";
+import { SHARED_CONTENT } from "@/constants/ui-contents/shared-content";
+import { useState } from "react";
+
+type ContributeModelDialogProps = {
+  isOpened: boolean;
+  closeDialog: () => void;
+};
+
+type StepProps = {
+  stepNumber: number;
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+};
+
+const statusBadgeClasses = {
+  pending: "bg-status-pending-color text-grey",
+  changes: "bg-status-changes-color text-grey",
+  approved: "bg-green-secondary text-grey",
+};
+const Step: React.FC<StepProps> = ({
+  stepNumber,
+  title,
+  children,
+  defaultOpen = false,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(defaultOpen);
+
+  return (
+    <div className="border-b border-gray-border last:border-b-0 pb-6 mb-6 last:mb-0 last:pb-0">
+      <button
+        className="flex items-center w-full text-left gap-x-3 cursor-pointer"
+        onClick={() => setIsExpanded((prev) => !prev)}
+      >
+        <span className="inline-flex items-center rounded-md justify-center bg-primary text-white text-body-3 font-semibold  px-2 py-1 min-w-max">
+          Step {stepNumber}
+        </span>
+        <h3 className="font-semibold text-body-1 text-dark flex-1">{title}</h3>
+
+        <ChevronDownIcon
+          className={`w-5 h-5 text-dark transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}`}
+        />
+      </button>
+      {isExpanded && <div className="mt-4 pl-0">{children}</div>}
+    </div>
+  );
+};
+
+const StatusBadge = ({
+  className,
+  label,
+}: {
+  className: string;
+  label: string;
+}) => {
+  return (
+    <span
+      className={`inline-flex items-center whitespace-nowrap px-2 md:px-3 py-1 rounded-[88px] text-xs md:text-body-3 ${className}`}
+    >
+      {label}
+    </span>
+  );
+};
+
+const ContributeModelDialog: React.FC<ContributeModelDialogProps> = ({
+  isOpened,
+  closeDialog,
+}) => {
+  const contributeModelDialogContent =
+    SHARED_CONTENT.baseModelsPage.contributeModelDialog;
+
+  return (
+    <Dialog
+      label={contributeModelDialogContent.label}
+      isOpened={isOpened}
+      closeDialog={closeDialog}
+    >
+      <div className="flex flex-col gap-y-2">
+        <p className="text-grey text-body-2base mb-6">
+          {contributeModelDialogContent.intro}
+        </p>
+
+        {contributeModelDialogContent.steps.map((step, index) => (
+          <Step
+            key={step.title}
+            stepNumber={index + 1}
+            title={step.title}
+            defaultOpen={index === 0}
+          >
+            <div className="flex flex-col gap-y-4">
+              {step.description && (
+                <p className="text-grey text-body-2base">{step.description}</p>
+              )}
+
+              {step.sections && (
+                <div className="flex flex-col gap-y-6">
+                  {step.sections.map((section) => (
+                    <div key={section.title}>
+                      <h4 className="font-semibold text-body-2 text-dark mb-2">
+                        {section.title}
+                      </h4>
+
+                      {section.description && (
+                        <p className="text-grey text-body-3 mb-2">
+                          {section.description}
+                        </p>
+                      )}
+
+                      {section.items && section.items.length > 0 && (
+                        <>
+                          {section.listType === "ordered" ? (
+                            <ol className="list-decimal list-inside text-grey text-body-3 space-y-1 ml-2">
+                              {section.items.map((item) => (
+                                <li key={item}>{item}</li>
+                              ))}
+                            </ol>
+                          ) : (
+                            <ul className="list-disc list-inside text-grey text-body-3 space-y-1 ml-2">
+                              {section.items.map((item) => (
+                                <li key={item}>{item}</li>
+                              ))}
+                            </ul>
+                          )}
+                        </>
+                      )}
+
+                      {section.note && (
+                        <p className="text-grey text-body-3 italic mt-2">
+                          {section.note}
+                        </p>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {step.statuses && (
+                <div className="flex flex-col gap-y-2 md:gap-y-3">
+                  {step.statuses.map((status) => (
+                    <div
+                      className="flex items-center gap-x-1 md:gap-x-4"
+                      key={status.label}
+                    >
+                      <StatusBadge
+                        className={statusBadgeClasses[status.variant]}
+                        label={status.label}
+                      />
+                      <span className="text-grey text-body-4 md:text-body-3">
+                        {status.description}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </Step>
+        ))}
+
+        {/* Go to GitHub Button */}
+        <div className="flex justify-end mt-4">
+          <Link
+            title={contributeModelDialogContent.github.title}
+            href={contributeModelDialogContent.github.href}
+            blank
+          >
+            <Button className="rounded-sm">
+              {contributeModelDialogContent.github.buttonLabel}
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </Dialog>
+  );
+};
+
+export default ContributeModelDialog;
diff --git a/frontend/src/features/base-models/components/index.ts b/frontend/src/features/base-models/components/index.ts
new file mode 100644
index 000000000..1ca930cdc
--- /dev/null
+++ b/frontend/src/features/base-models/components/index.ts
@@ -0,0 +1,4 @@
+export { default as BaseModelCard } from "./base-model-card";
+export { default as ContributeModelDialog } from "./contribute-model-dialog";
+export { default as BaseModelsFilters } from "./base-models-filters";
+export { default as MobileBaseModelFiltersDialog } from "./mobile-base-model-filters";
diff --git a/frontend/src/features/base-models/components/mobile-base-model-filters.tsx b/frontend/src/features/base-models/components/mobile-base-model-filters.tsx
new file mode 100644
index 000000000..3029a6b98
--- /dev/null
+++ b/frontend/src/features/base-models/components/mobile-base-model-filters.tsx
@@ -0,0 +1,108 @@
+import { Button } from "@/components/ui/button";
+import { Dialog } from "@/components/ui/dialog";
+import { DropDown } from "@/components/ui/dropdown";
+import { ButtonVariant } from "@/enums";
+import { TASK_CATEGORIES, DATE_SORT_OPTIONS } from "@/utils/base-model-data";
+
+type TMenuItem = {
+  value: string;
+  apiValue: string;
+};
+
+type MobileBaseModelFiltersDialogProps = {
+  isOpened: boolean;
+  closeDialog: () => void;
+  categoryMenuItems: TMenuItem[];
+  dateMenuItems: TMenuItem[];
+  selectedCategoryLabel: string;
+  selectedDateLabel: string;
+  setCategory: (value: string | null) => void;
+  setDateSort: (value: string | null) => void;
+};
+
+const FilterItem = ({
+  children,
+  title,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <div>
+      <p className="mb-2">{title}</p>
+      <div className="border border-gray-border p-4">{children}</div>
+    </div>
+  );
+};
+
+const MobileBaseModelFiltersDialog: React.FC<
+  MobileBaseModelFiltersDialogProps
+> = ({
+  isOpened,
+  closeDialog,
+  categoryMenuItems,
+  dateMenuItems,
+  selectedCategoryLabel,
+  selectedDateLabel,
+  setCategory,
+  setDateSort,
+}) => {
+  return (
+    <Dialog isOpened={isOpened} closeDialog={closeDialog} label={"Filter"}>
+      <div className="flex flex-col gap-y-4">
+        <FilterItem title="Sort by">
+          <DropDown
+            menuItems={dateMenuItems}
+            withCheckbox
+            handleMenuSelection={(value: string) => {
+              const selected = DATE_SORT_OPTIONS.find((d) => d.label === value);
+              if (selected) {
+                setDateSort(
+                  selected.value === "newest" ? null : selected.value,
+                );
+              }
+            }}
+            defaultSelectedItem={selectedDateLabel}
+            triggerComponent={
+              <p className="text-sm text-dark text-nowrap">
+                {selectedDateLabel}
+              </p>
+            }
+          />
+        </FilterItem>
+
+        <FilterItem title="Filter by Category">
+          <DropDown
+            menuItems={categoryMenuItems}
+            withCheckbox
+            handleMenuSelection={(value: string) => {
+              const selected = TASK_CATEGORIES.find((c) => c.label === value);
+              if (selected) {
+                setCategory(selected.value === "all" ? null : selected.value);
+              }
+            }}
+            defaultSelectedItem={selectedCategoryLabel}
+            triggerComponent={
+              <p className="text-sm text-dark text-nowrap">
+                {selectedCategoryLabel}
+              </p>
+            }
+          />
+        </FilterItem>
+
+        <div className="flex items-center justify-between gap-x-4">
+          <Button
+            slot="footer"
+            variant={ButtonVariant.DEFAULT}
+            onClick={closeDialog}
+            size="medium"
+          >
+            Close
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+};
+
+export default MobileBaseModelFiltersDialog;
diff --git a/frontend/src/features/base-models/layouts/grid.tsx b/frontend/src/features/base-models/layouts/grid.tsx
new file mode 100644
index 000000000..f3b98958f
--- /dev/null
+++ b/frontend/src/features/base-models/layouts/grid.tsx
@@ -0,0 +1,20 @@
+import { TBaseModel } from "@/utils/base-model-data";
+import BaseModelCard from "@/features/base-models/components/base-model-card";
+
+type BaseModelGridLayoutProps = {
+  models: TBaseModel[];
+};
+
+const BaseModelGridLayout: React.FC<BaseModelGridLayoutProps> = ({
+  models,
+}) => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {models.map((model) => (
+        <BaseModelCard key={model.id} model={model} />
+      ))}
+    </div>
+  );
+};
+
+export default BaseModelGridLayout;
diff --git a/frontend/src/features/base-models/layouts/index.ts b/frontend/src/features/base-models/layouts/index.ts
new file mode 100644
index 000000000..058382dde
--- /dev/null
+++ b/frontend/src/features/base-models/layouts/index.ts
@@ -0,0 +1,2 @@
+export { default as BaseModelGridLayout } from "./grid";
+export { default as BaseModelTableLayout } from "./table";
diff --git a/frontend/src/features/base-models/layouts/table.tsx b/frontend/src/features/base-models/layouts/table.tsx
new file mode 100644
index 000000000..7b8467cf6
--- /dev/null
+++ b/frontend/src/features/base-models/layouts/table.tsx
@@ -0,0 +1,78 @@
+import { APPLICATION_ROUTES } from "@/constants";
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+import DataTable from "@/components/ui/data-table/data-table";
+import { SortableHeader } from "@/features/models/components/table-header";
+import { roundNumber, truncateString } from "@/utils";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { TBaseModel } from "@/utils/base-model-data";
+
+const columnDefinitions: ColumnDef<TBaseModel>[] = [
+  {
+    accessorKey: "id",
+    header: ({ column }) => <SortableHeader title={"ID"} column={column} />,
+  },
+  {
+    accessorKey: "name",
+    header: "Model Name",
+    cell: ({ row }) => (
+      <span title={row.getValue("name")}>
+        {truncateString(row.getValue("name"), 50)}
+      </span>
+    ),
+  },
+  {
+    accessorKey: "task",
+    header: "Task",
+  },
+  {
+    accessorKey: "createdBy",
+    header: "Created by",
+  },
+  {
+    accessorKey: "version",
+    header: "Version",
+  },
+  {
+    accessorKey: "accuracy",
+    header: ({ column }) => (
+      <SortableHeader title={"Accuracy (%)"} column={column} />
+    ),
+    cell: ({ row }) => {
+      return <span>{roundNumber(row.getValue("accuracy") ?? 0)}</span>;
+    },
+  },
+  {
+    accessorKey: "lastModified",
+    header: ({ column }) => (
+      <SortableHeader title={"Last Modified"} column={column} />
+    ),
+  },
+];
+
+type BaseModelTableLayoutProps = {
+  models: TBaseModel[];
+};
+
+const BaseModelTableLayout: React.FC<BaseModelTableLayoutProps> = ({
+  models,
+}) => {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const navigate = useNavigate();
+
+  const handleClick = (rowData: TBaseModel) => {
+    navigate(`${APPLICATION_ROUTES.BASE_MODELS_HOME}/${rowData.id}`);
+  };
+
+  return (
+    <DataTable
+      data={models}
+      columns={columnDefinitions}
+      sorting={sorting}
+      setSorting={setSorting}
+      onRowClick={handleClick}
+    />
+  );
+};
+
+export default BaseModelTableLayout;
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 4cc2edfc3..e37c92f62 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -27,6 +27,8 @@ body {
   --hot-fair-color-green-primary: #198155;
   --hot-fair-color-frosted-blue: #f7f9fb;
   --hot-fair-color-ink: #202325;
+  --hot-fair-color-status-pending-color: #fff9da;
+  --hot-fair-color-status-changes-color: #ffe3da;
 
   /* Font sizes in rem */
   --hot-fair-font-size-extra-large: 4.25rem;
@@ -144,12 +146,82 @@ sl-alert.success::part(base) {
 /* Tailwind styles begins */
 
 /* Banner content customization starts */
-.prose * {
+.prose:not(.model-detail-prose) * {
   color: var(--hot-fair-color-white) !important;
   margin: 0px !important;
 }
 /* Banner content customization ends */
 
+/* Model detail page markdown prose styles starts */
+.model-detail-prose {
+  color: var(--hot-fair-color-dark);
+}
+
+.model-detail-prose h2 {
+  color: var(--hot-fair-color-dark);
+  font-weight: 600;
+  font-size: var(--hot-fair-font-size-title-3);
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+}
+
+.model-detail-prose h2:first-child {
+  margin-top: 0;
+}
+
+.model-detail-prose h3 {
+  color: var(--hot-fair-color-dark);
+  font-weight: 500;
+  font-size: var(--hot-fair-font-size-body-text-1);
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.model-detail-prose p {
+  color: var(--hot-fair-color-gray);
+  font-size: var(--hot-fair-font-size-body-text-2base);
+  line-height: 1.7;
+  margin-bottom: 0.75rem;
+}
+
+.model-detail-prose ul,
+.model-detail-prose ol {
+  color: var(--hot-fair-color-gray);
+  font-size: var(--hot-fair-font-size-body-text-2base);
+  padding-left: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.model-detail-prose li {
+  margin-bottom: 0.375rem;
+  line-height: 1.6;
+}
+
+.model-detail-prose strong {
+  color: var(--hot-fair-color-dark);
+  font-weight: 600;
+}
+
+.model-detail-prose code {
+  color: var(--hot-fair-color-primary);
+  background-color: var(--hot-fair-color-off-white);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+}
+
+.model-detail-prose a {
+  color: var(--hot-fair-color-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.model-detail-prose a:hover {
+  opacity: 0.8;
+}
+/* Model detail page markdown prose styles ends */
+
 @layer components {
   .icon {
     @apply inline-block h-4 w-4;
diff --git a/frontend/src/types/ui-contents.ts b/frontend/src/types/ui-contents.ts
index 767763912..0dd09d056 100644
--- a/frontend/src/types/ui-contents.ts
+++ b/frontend/src/types/ui-contents.ts
@@ -432,6 +432,43 @@ export type TSharedContent = {
       ctaLink: string;
       paragraph: string;
     };
+    baseModelCTA: {
+      title: string;
+      description: string;
+      ctaButton: string;
+      ctaLink: string;
+    };
+  };
+  baseModelsPage: {
+    pageHeadingTitle: string;
+    pageHeadingDescription: string;
+    pageHeadingButtonText: string;
+    contributeModelDialog: {
+      label: string;
+      intro: string;
+
+      github: {
+        title: string;
+        href: string;
+        buttonLabel: string;
+      };
+      steps: {
+        title: string;
+        description?: string;
+        sections?: {
+          title: string;
+          description?: string;
+          listType?: "unordered" | "ordered";
+          items?: string[];
+          note?: string;
+        }[];
+        statuses?: {
+          variant: "pending" | "changes" | "approved";
+          label: string;
+          description: string;
+        }[];
+      }[];
+    };
   };
   pageNotFound: {
     messages: {
diff --git a/frontend/src/utils/base-model-data.ts b/frontend/src/utils/base-model-data.ts
new file mode 100644
index 000000000..93ec398ef
--- /dev/null
+++ b/frontend/src/utils/base-model-data.ts
@@ -0,0 +1,394 @@
+/**
+ * Static base model data used until the API is ready.
+ */
+export type TBaseModel = {
+  id: number;
+  name: string;
+  description: string;
+  accuracy: number;
+  author: string;
+  lastModified: string;
+  task: string;
+  version: string;
+  createdBy: string;
+  generatedOn: string;
+  modelWeightsLicense: string;
+  datasetLicense: string;
+  dataId: string;
+};
+
+/**
+ * Extended detail data for a base model's detail page.
+ */
+export type TBaseModelDetail = TBaseModel & {
+  fullTitle: string;
+  overview: string;
+  markdownContent: string; // Optional field for additional markdown content
+  useCases: {
+    suitable: string[];
+    notSuitable: string[];
+  };
+  performance: string;
+  limitations: string[];
+  architecture: {
+    baseModel: string;
+    head: string;
+    input: string;
+    tileSizePx: string;
+    processing: string;
+    resize: string;
+    scaling: string;
+    output: string;
+    outputDescription: string;
+    variants: TBaseModelVariant[];
+  };
+  dataInfo: {
+    sensor: string;
+    crs: string;
+    spatialExtent: string;
+    temporalExtent: string;
+  };
+  downloadMetadataUrl?: string;
+};
+
+export type TBaseModelVariant = {
+  name: string;
+  classes: string;
+  notes: string;
+};
+
+export const BASE_MODELS_DATA: TBaseModel[] = [
+  {
+    id: 1,
+    name: "RAMP",
+    description:
+      "Optimized for faster training with decent accuracy. Best suited for building detection tasks.",
+    accuracy: 80.98,
+    author: "Omran Najjar",
+    lastModified: "25/12/24",
+    task: "semantic-segmentation",
+    version: "v1.0",
+    createdBy: "RAMP (Replicable AI for Microplanning) contributors",
+    generatedOn: "2026-02-22",
+    modelWeightsLicense: "TBD",
+    datasetLicense: "TBD",
+    dataId: "50",
+  },
+  {
+    id: 2,
+    name: "YOLO_V8_V1",
+    description:
+      "A well-balanced model offering good accuracy for detecting structures in major areas. Trained by the community.",
+    accuracy: 80.98,
+    author: "Omran Najjar",
+    lastModified: "25/12/24",
+    task: "instance-segmentation",
+    version: "v1.0",
+    createdBy: "Community contributors",
+    generatedOn: "2026-01-15",
+    modelWeightsLicense: "TBD",
+    datasetLicense: "TBD",
+    dataId: "51",
+  },
+  {
+    id: 3,
+    name: "YOLO_V8_V2",
+    description:
+      "Our most advanced model. Designed for detecting various features across different areas. Developed in collaboration with Omdena AI.",
+    accuracy: 80.98,
+    author: "Omran Najjar",
+    lastModified: "25/12/24",
+    task: "object-detection",
+    version: "v2.0",
+    createdBy: "Omdena AI collaboration",
+    generatedOn: "2026-02-10",
+    modelWeightsLicense: "TBD",
+    datasetLicense: "TBD",
+    dataId: "52",
+  },
+];
+
+/**
+ * Detailed data for base model detail pages.
+ */
+export const BASE_MODELS_DETAIL_DATA: TBaseModelDetail[] = [
+  {
+    ...BASE_MODELS_DATA[0],
+    fullTitle: "RAMP Building Footprint Segmentation Model",
+    markdownContent: `## Overview
+
+This model extracts building footprints from high-resolution overhead RGB satellite imagery. It produces per-pixel class masks that can be post-processed into building polygons for micromapping and humanitarian mapping workflows.
+
+This card describes the reference RAMP segmentation model family: an **EfficientNet encoder + U-Net (decoder)** semantic segmentation network trained on 256×256 RGB chips. Specific trained checkpoints (weights) vary by AOI/dataset and training configuration.
+
+## Use Cases
+
+### Suitable for
+
+- Building footprint mapping from high-resolution overhead RGB imagery
+- Generating building polygons (GeoJSON) for micromapping workflows
+- Training and fine-tuning building segmentation models for new regions using the same pipeline
+
+### Not suitable for
+
+- Non-RGB-only inputs (e.g., SAR-only, multispectral without adapting the model)
+- Low-resolution imagery where buildings are not resolvable at chip scale
+- "Out of the box" global inference without validation (models are strongly data/domain-dependent)
+
+## Performance
+
+Evaluation metrics (validation): Validation pixel-wise sparse categorical accuracy ≈ 1,000 for a representative binary-building checkpoint. This means that **≈98.9%** of pixels in the validation chips were assigned the correct class (building vs background). Because background pixels typically dominate, pixel accuracy can overstate real-extent footprint quality; also report polygon level Precision/Recall/F1 on validation using Intersection-over-Union (IoU) matching at IoU ≥ 0.5 (IoU@0.5) recommended.
+
+## Limitations
+
+1. **Domain shift / transfer risk:** Performance can degrade substantially across countries, roof materials, seasons, and label conventions. Validate on representative samples before scaling.
+2. **Resolution & tiling constraints:** The default production/training flow assumes 256 × 256 chips and model-specific preprocessing; changing resolution or chip size requires spatial revalidation.
+3. **Preprocessing sensitivity:** Images are normalized per-chip to \`[0,1]\` via division by the chip's max value. This differs from fixed global scaling and can change behavior across datasets.
+4. **Polygon post processing assumptions:** Polygon fusion across tile boundaries and boundary buffering depend on mask conventions (binary vs multi-mask with boundary pixels). Incorrect settings can distort outputs.
+`,
+    overview:
+      "This model extracts building footprints from high-resolution overhead RGB satellite imagery. It produces per-pixel class masks that can be post-processed into building polygons for micromapping and humanitarian mapping workflows.\n\nThis card describes the reference RAMP segmentation model family: an EfficientNet encoder + U-Net (decoder) semantic segmentation network trained on 256×256 RGB chips. Specific trained checkpoints (weights) vary by AOI/dataset and training configuration.",
+    useCases: {
+      suitable: [
+        "Building footprint mapping from high-resolution overhead RGB imagery",
+        "Generating building polygons (GeoJSON) for micromapping workflows",
+        "Training and fine-tuning building segmentation models for new regions using the same pipeline",
+      ],
+      notSuitable: [
+        "Non-RGB-only inputs (e.g., SAR-only, multispectral without adapting the model)",
+        "Low-resolution imagery where buildings are not resolvable at chip scale",
+        '"Out of the box" global inference without validation (models are strongly data/domain-dependent)',
+      ],
+    },
+    performance:
+      "Evaluation metrics (validation): Validation pixel-wise sparse categorical accuracy ≈ 1,000 for a representative binary-building checkpoint. This means that ≈98.9% of pixels in the validation chips were assigned the correct class (building vs background). Because background pixels typically dominate, pixel accuracy can overstate real-extent footprint quality; also report polygon level Precision/Recall/F1 on validation using Intersection-over-Union (IoU) matching at IoU ≥ 0.5 (IoU@0.5) recommended.",
+    limitations: [
+      "Domain shift / transfer risk: Performance can degrade substantially across countries, roof materials, seasons, and label conventions. Validate on representative samples before scaling.",
+      "Resolution & tiling constraints: The default production/training flow assumes 256 × 256 chips and model-specific preprocessing; changing resolution or chip size requires spatial revalidation.",
+      "Preprocessing sensitivity: Images are normalized per-chip to [0,1] via division by the chip's max value. This differs from fixed global scaling and can change behavior across datasets.",
+      "Polygon post processing assumptions: Polygon fusion across tile boundaries and boundary buffering depend on mask conventions (binary vs multi-mask with boundary pixels). Incorrect settings can distort outputs.",
+      "Domain shift / transfer risk: Performance can degrade substantially across countries, roof materials, seasons, and label conventions. Validate on representative samples before scaling.",
+      "Resolution & tiling constraints: The default production/training flow assumes 256 × 256 chips and model-specific preprocessing; changing resolution or chip size requires spatial revalidation.",
+      "Preprocessing sensitivity: Images are normalized per-chip to [0,1] via division by the chip's max value. This differs from fixed global scaling and can change behavior across datasets.",
+      "Polygon post processing assumptions: Polygon fusion across tile boundaries and boundary buffering depend on mask conventions (binary vs multi-mask with boundary pixels). Incorrect settings can distort outputs.",
+      "Domain shift / transfer risk: Performance can degrade substantially across countries, roof materials, seasons, and label conventions. Validate on representative samples before scaling.",
+      "Resolution & tiling constraints: The default production/training flow assumes 256 × 256 chips and model-specific preprocessing; changing resolution or chip size requires spatial revalidation.",
+    ],
+    architecture: {
+      baseModel: "EfficientNet-B0 encoder (imagenet-pretrained)",
+      head: "U-Net decoder",
+      input: "GBI GeoTIFF chip (channels-last in model pipeline)",
+      tileSizePx: "[256, 256]",
+      processing: "—",
+      resize: "direct route to output_img_shape when output 256×256",
+      scaling: "per-chip normalization: float32 / max(pixel_value) → [0 .. 1]",
+      output: "—",
+      outputDescription:
+        "Single-band uint8 mask with class IDs derived by argmax over class probabilities",
+      variants: [
+        {
+          name: "Binary-mask",
+          classes: '["background", "buildings"]',
+          notes: "Used in many configs (num_classes=2).",
+        },
+        {
+          name: "Multi-mask (4-class)",
+          classes: '["background", "buildings", "boundary", "close_contact"]',
+          notes: "Used for boundary-aware training and downstream fusion.",
+        },
+      ],
+    },
+    dataInfo: {
+      sensor: "High-resolution overhead optical (RGB) satellite imagery",
+      crs: "Match intent source imagery CRS; polygon outputs are commonly delivered in EPSG:4326",
+      spatialExtent: "TBD (AOI-dependent)",
+      temporalExtent: "TBD",
+    },
+  },
+  {
+    ...BASE_MODELS_DATA[1],
+    fullTitle: "YOLO V8 V1 Building Detection Model",
+    markdownContent: `## Overview
+
+This model extracts building footprints from high-resolution overhead RGB satellite imagery. It produces per-pixel class masks that can be post-processed into building polygons for micromapping and humanitarian mapping workflows.
+
+This card describes the reference RAMP segmentation model family: an **EfficientNet encoder + U-Net (decoder)** semantic segmentation network trained on 256×256 RGB chips. Specific trained checkpoints (weights) vary by AOI/dataset and training configuration.
+
+## Use Cases
+
+### Suitable for
+
+- Building footprint mapping from high-resolution overhead RGB imagery
+- Generating building polygons (GeoJSON) for micromapping workflows
+- Training and fine-tuning building segmentation models for new regions using the same pipeline
+
+### Not suitable for
+
+- Non-RGB-only inputs (e.g., SAR-only, multispectral without adapting the model)
+- Low-resolution imagery where buildings are not resolvable at chip scale
+- "Out of the box" global inference without validation (models are strongly data/domain-dependent)
+
+## Performance
+
+Evaluation metrics (validation): Validation pixel-wise sparse categorical accuracy ≈ 1,000 for a representative binary-building checkpoint. This means that **≈98.9%** of pixels in the validation chips were assigned the correct class (building vs background). Because background pixels typically dominate, pixel accuracy can overstate real-extent footprint quality; also report polygon level Precision/Recall/F1 on validation using Intersection-over-Union (IoU) matching at IoU ≥ 0.5 (IoU@0.5) recommended.
+
+## Limitations
+
+1. **Domain shift / transfer risk:** Performance can degrade substantially across countries, roof materials, seasons, and label conventions. Validate on representative samples before scaling.
+2. **Resolution & tiling constraints:** The default production/training flow assumes 256 × 256 chips and model-specific preprocessing; changing resolution or chip size requires spatial revalidation.
+3. **Preprocessing sensitivity:** Images are normalized per-chip to \`[0,1]\` via division by the chip's max value. This differs from fixed global scaling and can change behavior across datasets.
+4. **Polygon post processing assumptions:** Polygon fusion across tile boundaries and boundary buffering depend on mask conventions (binary vs multi-mask with boundary pixels). Incorrect settings can distort outputs.
+`,
+    overview:
+      "A well-balanced YOLOv8-based model trained by the community. It offers good accuracy for detecting building structures in major urban and suburban areas using high-resolution overhead imagery.\n\nThis model leverages the YOLOv8 architecture for instance segmentation, producing both bounding boxes and pixel-level masks for individual buildings.",
+    useCases: {
+      suitable: [
+        "Building detection in urban and suburban areas from aerial/satellite imagery",
+        "Instance-level building segmentation for individual footprint extraction",
+        "Rapid area-wide building inventory mapping",
+      ],
+      notSuitable: [
+        "Rural areas with very sparse, small structures",
+        "SAR or multispectral-only imagery without RGB channels",
+        "Fine-grained building type classification beyond presence/absence",
+      ],
+    },
+    performance:
+      "The model achieves mAP@0.5 scores of approximately 0.78 on validation datasets covering diverse urban environments. Performance may vary based on image resolution, building density, and regional architectural styles.",
+    limitations: [
+      "Performance degrades in areas with densely packed informal settlements where building boundaries are ambiguous.",
+      "Requires high-resolution imagery (≤0.5m GSD) for optimal performance.",
+      "Not validated for non-building structure detection tasks.",
+    ],
+    architecture: {
+      baseModel: "YOLOv8 (ultralytics)",
+      head: "Instance Segmentation Head",
+      input: "RGB image tiles (640×640 default)",
+      tileSizePx: "[640, 640]",
+      processing: "Auto-padding and letterboxing",
+      resize: "Bilinear interpolation to target size",
+      scaling: "Normalize to [0, 1]",
+      output: "Bounding boxes + instance masks",
+      outputDescription:
+        "Per-instance bounding boxes with confidence scores and binary segmentation masks",
+      variants: [
+        {
+          name: "Standard",
+          classes: '["background", "building"]',
+          notes: "Default 2-class configuration.",
+        },
+      ],
+    },
+    dataInfo: {
+      sensor: "High-resolution overhead optical (RGB) satellite imagery",
+      crs: "EPSG:4326 (WGS84)",
+      spatialExtent: "Multiple urban areas globally",
+      temporalExtent: "2020-2025",
+    },
+  },
+  {
+    ...BASE_MODELS_DATA[2],
+    markdownContent: `## Overview
+
+This model extracts building footprints from high-resolution overhead RGB satellite imagery. It produces per-pixel class masks that can be post-processed into building polygons for micromapping and humanitarian mapping workflows.
+
+This card describes the reference RAMP segmentation model family: an **EfficientNet encoder + U-Net (decoder)** semantic segmentation network trained on 256×256 RGB chips. Specific trained checkpoints (weights) vary by AOI/dataset and training configuration.
+
+## Use Cases
+
+### Suitable for
+
+- Building footprint mapping from high-resolution overhead RGB imagery
+- Generating building polygons (GeoJSON) for micromapping workflows
+- Training and fine-tuning building segmentation models for new regions using the same pipeline
+
+### Not suitable for
+
+- Non-RGB-only inputs (e.g., SAR-only, multispectral without adapting the model)
+- Low-resolution imagery where buildings are not resolvable at chip scale
+- "Out of the box" global inference without validation (models are strongly data/domain-dependent)
+
+## Performance
+
+Evaluation metrics (validation): Validation pixel-wise sparse categorical accuracy ≈ 1,000 for a representative binary-building checkpoint. This means that **≈98.9%** of pixels in the validation chips were assigned the correct class (building vs background). Because background pixels typically dominate, pixel accuracy can overstate real-extent footprint quality; also report polygon level Precision/Recall/F1 on validation using Intersection-over-Union (IoU) matching at IoU ≥ 0.5 (IoU@0.5) recommended.
+
+## Limitations
+
+1. **Domain shift / transfer risk:** Performance can degrade substantially across countries, roof materials, seasons, and label conventions. Validate on representative samples before scaling.
+2. **Resolution & tiling constraints:** The default production/training flow assumes 256 × 256 chips and model-specific preprocessing; changing resolution or chip size requires spatial revalidation.
+3. **Preprocessing sensitivity:** Images are normalized per-chip to \`[0,1]\` via division by the chip's max value. This differs from fixed global scaling and can change behavior across datasets.
+4. **Polygon post processing assumptions:** Polygon fusion across tile boundaries and boundary buffering depend on mask conventions (binary vs multi-mask with boundary pixels). Incorrect settings can distort outputs.
+`,
+    fullTitle: "YOLO V8 V2 Multi-Feature Detection Model",
+    overview:
+      "Our most advanced model, developed in collaboration with Omdena AI. This YOLOv8 v2 model is designed for detecting various features across different geographic areas, including buildings, roads, and other infrastructure.\n\nBuilt on extensive community-contributed training data from multiple countries, it provides robust detection across diverse environments.",
+    useCases: {
+      suitable: [
+        "Multi-feature detection across diverse geographic regions",
+        "Building and infrastructure mapping for humanitarian response",
+        "Large-scale mapping projects requiring consistent detection quality",
+      ],
+      notSuitable: [
+        "Single-feature specialized detection where a domain-specific model would perform better",
+        "Very low resolution imagery (> 1m GSD)",
+        "Real-time video processing applications",
+      ],
+    },
+    performance:
+      "Achieves mAP@0.5 of approximately 0.82 across diverse test datasets. The v2 model shows a 5% improvement over v1 in challenging environments such as informal settlements and mixed land-use areas.",
+    limitations: [
+      "Larger model size may impact inference speed on resource-constrained devices.",
+      "Multi-class detection may produce occasional false positives in complex scenes.",
+      "Performance in heavily forested or mountainous terrain is not yet fully validated.",
+      "Requires GPU for efficient batch inference.",
+    ],
+    architecture: {
+      baseModel: "YOLOv8x (ultralytics, extra-large)",
+      head: "Object Detection Head",
+      input: "RGB image tiles (640×640)",
+      tileSizePx: "[640, 640]",
+      processing: "Mosaic augmentation compatible",
+      resize: "Adaptive resize with aspect ratio preservation",
+      scaling: "Normalize to [0, 1]",
+      output: "Bounding boxes + class labels",
+      outputDescription:
+        "Polygonize_and_fuse: convert predicted masks to polygons and fuse across tile boundaries",
+      variants: [
+        {
+          name: "Standard",
+          classes: '["background", "building"]',
+          notes: "Default building detection configuration.",
+        },
+        {
+          name: "Multi-feature",
+          classes: '["background", "building", "road", "water"]',
+          notes: "Extended multi-class detection (experimental).",
+        },
+      ],
+    },
+    dataInfo: {
+      sensor: "High-resolution overhead optical (RGB) satellite imagery",
+      crs: "EPSG:4326 (WGS84)",
+      spatialExtent: "Global (multi-country training data)",
+      temporalExtent: "2021-2026",
+    },
+  },
+];
+
+/**
+ * Task category options for the category filter dropdown.
+ */
+export const TASK_CATEGORIES = [
+  { label: "All", value: "all" },
+  { label: "Semantic Segmentation", value: "semantic-segmentation" },
+  { label: "Instance Segmentation", value: "instance-segmentation" },
+  { label: "Object Detection", value: "object-detection" },
+];
+
+/**
+ * Date sort options.
+ */
+export const DATE_SORT_OPTIONS = [
+  { label: "Newest First", value: "newest" },
+  { label: "Oldest First", value: "oldest" },
+];
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 8d30b66ac..5581a1581 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -15,7 +15,9 @@ export default {
         "hover-accent": "var( --hot-fair-color-hover-accent)",
         "green-secondary": "var(--hot-fair-color-green-secondary)",
         "green-primary": "var(--hot-fair-color-green-primary)",
-        "frosted-blue": "var(--hot-fair-color-frosted-blue)"
+        "frosted-blue": "var(--hot-fair-color-frosted-blue)",
+        "status-pending-color": "var(--hot-fair-color-status-pending-color)",
+        "status-changes-color": "var(--hot-fair-color-status-changes-color)",
       },
       fontFamily: {
         archivo: "var(--sl-font-sans)",