diff --git a/clients/ui/bff/internal/api/model_registry_settings_handler.go b/clients/ui/bff/internal/api/model_registry_settings_handler.go
index 95d35aa826..410929ca87 100644
--- a/clients/ui/bff/internal/api/model_registry_settings_handler.go
+++ b/clients/ui/bff/internal/api/model_registry_settings_handler.go
@@ -36,10 +36,33 @@ func (app *App) GetAllModelRegistriesSettingsHandler(w http.ResponseWriter, r *h
 		Key:  "ssl-secret-key",
 	}
 
+	lastTransitionTime, _ := time.Parse(time.RFC3339, "2024-03-22T09:30:02Z")
+	deletionTime := lastTransitionTime
 	registries := []models.ModelRegistryKind{
-		createSampleModelRegistry("model-registry", namespace, &sslRootCertificateConfigMap, nil),
-		createSampleModelRegistry("model-registry-dora", namespace, nil, &sslRootCertificateSecret),
-		createSampleModelRegistry("model-registry-bella", namespace, nil, nil),
+		createSampleModelRegistry("model-registry", namespace, &sslRootCertificateConfigMap, nil, nil, nil),
+		createSampleModelRegistry("model-registry-dora", namespace, nil, &sslRootCertificateSecret, nil, nil),
+		createSampleModelRegistry("model-registry-bella", namespace, nil, nil, nil, nil),
+		createSampleModelRegistry("model-registry-ready", namespace, nil, nil, nil,
+			[]models.Condition{
+				{LastTransitionTime: lastTransitionTime, Message: "Deployment for custom resource model-registry-ready is available", Reason: "Available", Status: "True", Type: "Available"},
+			}),
+		createSampleModelRegistry("model-registry-starting", namespace, nil, nil, nil,
+			[]models.Condition{
+				{LastTransitionTime: lastTransitionTime, Message: "Deployment for custom resource model-registry-starting was successfully created", Reason: "CreatedDeployment", Status: "True", Type: "Progressing"},
+			}),
+		createSampleModelRegistry("model-registry-stopping", namespace, nil, nil, &deletionTime,
+			[]models.Condition{
+				{LastTransitionTime: lastTransitionTime, Message: "Deployment for custom resource model-registry-stopping is available", Reason: "Available", Status: "True", Type: "Available"},
+			}),
+		createSampleModelRegistry("model-registry-degrading", namespace, nil, nil, nil,
+			[]models.Condition{
+				{LastTransitionTime: lastTransitionTime, Message: "Service is degrading", Reason: "Degraded", Status: "True", Type: "Degraded"},
+			}),
+		createSampleModelRegistry("model-registry-unavailable", namespace, nil, nil, nil,
+			[]models.Condition{
+				{LastTransitionTime: lastTransitionTime, Message: "Service is unavailable", Reason: "Unavailable", Status: "False", Type: "Available"},
+				{LastTransitionTime: lastTransitionTime, Message: "Istio resources are unavailable", Reason: "IstioUnavailable", Status: "False", Type: "IstioAvailable"},
+			}),
 	}
 
 	modelRegistryRes := ModelRegistrySettingsListEnvelope{
@@ -62,7 +85,7 @@ func (app *App) GetModelRegistrySettingsHandler(w http.ResponseWriter, r *http.R
 	}
 
 	modelId := ps.ByName(ModelRegistryId)
-	registry := createSampleModelRegistry(modelId, namespace, nil, nil)
+	registry := createSampleModelRegistry(modelId, namespace, nil, nil, nil, nil)
 
 	modelRegistryWithCreds := models.ModelRegistryAndCredentials{
 		ModelRegistry:    registry,
@@ -102,7 +125,7 @@ func (app *App) CreateModelRegistrySettingsHandler(w http.ResponseWriter, r *htt
 
 	ctxLogger.Info("Creating model registry", "name", modelRegistryName)
 
-	registry := createSampleModelRegistry(modelRegistryName, namespace, nil, nil)
+	registry := createSampleModelRegistry(modelRegistryName, namespace, nil, nil, nil, nil)
 
 	modelRegistryRes := ModelRegistrySettingsEnvelope{
 		Data: registry,
@@ -125,7 +148,7 @@ func (app *App) UpdateModelRegistrySettingsHandler(w http.ResponseWriter, r *htt
 	}
 
 	modelId := ps.ByName(ModelRegistryId)
-	registry := createSampleModelRegistry(modelId, namespace, nil, nil)
+	registry := createSampleModelRegistry(modelId, namespace, nil, nil, nil, nil)
 
 	modelRegistryRes := ModelRegistrySettingsEnvelope{
 		Data: registry,
@@ -148,7 +171,7 @@ func (app *App) DeleteModelRegistrySettingsHandler(w http.ResponseWriter, r *htt
 
 	// This is a temporary fix to handle frontend error (as it is expecting ModelRegistryKind response) until we have a real implementation
 	modelId := ps.ByName(ModelRegistryId)
-	registry := createSampleModelRegistry(modelId, namespace, nil, nil)
+	registry := createSampleModelRegistry(modelId, namespace, nil, nil, nil, nil)
 
 	modelRegistryRes := ModelRegistrySettingsEnvelope{
 		Data: registry,
@@ -161,10 +184,9 @@ func (app *App) DeleteModelRegistrySettingsHandler(w http.ResponseWriter, r *htt
 }
 
 // This function is a temporary function to create a sample model registry kind until we have a real implementation
-func createSampleModelRegistry(name string, namespace string, SSLRootCertificateConfigMap *models.Entry, SSLRootCertificateSecret *models.Entry) models.ModelRegistryKind {
+func createSampleModelRegistry(name string, namespace string, SSLRootCertificateConfigMap *models.Entry, SSLRootCertificateSecret *models.Entry, deletionTimestamp *time.Time, conditions []models.Condition) models.ModelRegistryKind {
 
 	creationTime, _ := time.Parse(time.RFC3339, "2024-03-14T08:01:42Z")
-	lastTransitionTime, _ := time.Parse(time.RFC3339, "2024-03-22T09:30:02Z")
 
 	return models.ModelRegistryKind{
 		APIVersion: "modelregistry.io/v1alpha1",
@@ -173,6 +195,7 @@ func createSampleModelRegistry(name string, namespace string, SSLRootCertificate
 			Name:              name,
 			Namespace:         namespace,
 			CreationTimestamp: creationTime,
+			DeletionTimestamp: deletionTimestamp,
 			Annotations:       map[string]string{},
 		},
 		Spec: models.ModelRegistrySpec{
@@ -205,15 +228,7 @@ func createSampleModelRegistry(name string, namespace string, SSLRootCertificate
 			},
 		},
 		Status: models.Status{
-			Conditions: []models.Condition{
-				{
-					LastTransitionTime: lastTransitionTime,
-					Message:            "Deployment for custom resource " + name + " was successfully created",
-					Reason:             "CreatedDeployment",
-					Status:             "True",
-					Type:               "Progressing",
-				},
-			},
+			Conditions: conditions,
 		},
 	}
 }
diff --git a/clients/ui/bff/internal/models/model_registry_kind.go b/clients/ui/bff/internal/models/model_registry_kind.go
index f378b68751..ddc3e1998e 100644
--- a/clients/ui/bff/internal/models/model_registry_kind.go
+++ b/clients/ui/bff/internal/models/model_registry_kind.go
@@ -21,6 +21,7 @@ type Metadata struct {
 	Name              string            `json:"name"`
 	Namespace         string            `json:"namespace"`
 	CreationTimestamp time.Time         `json:"creationTimestamp"`
+	DeletionTimestamp *time.Time        `json:"deletionTimestamp,omitempty"`
 	Annotations       map[string]string `json:"annotations,omitempty"`
 }
 
diff --git a/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelTransferJobs.cy.ts b/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelTransferJobs.cy.ts
index 0ef41f860b..4cc905df2d 100644
--- a/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelTransferJobs.cy.ts
+++ b/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelTransferJobs.cy.ts
@@ -250,7 +250,7 @@ describe('Model transfer jobs', () => {
     failedRow.find().findByTestId('job-status').should('contain.text', 'Failed');
 
     const cancelledRow = modelTransferJobsPage.getRow('job-cancelled');
-    cancelledRow.find().findByTestId('job-status').should('contain.text', 'Cancelled');
+    cancelledRow.find().findByTestId('job-status').should('contain.text', 'Canceled');
 
     completedRow.find().findByTestId('job-status').click();
     cy.findByTestId('transfer-job-status-modal').should('be.visible');
diff --git a/clients/ui/frontend/src/app/hooks/__tests__/useModelTransferJobs.spec.ts b/clients/ui/frontend/src/app/hooks/__tests__/useModelTransferJobs.spec.ts
index 9aed13d1c6..7f7d4dae83 100644
--- a/clients/ui/frontend/src/app/hooks/__tests__/useModelTransferJobs.spec.ts
+++ b/clients/ui/frontend/src/app/hooks/__tests__/useModelTransferJobs.spec.ts
@@ -1,4 +1,4 @@
-import { waitFor } from '@testing-library/react';
+import { act, waitFor } from '@testing-library/react';
 import { useFetchState, POLL_INTERVAL } from 'mod-arch-core';
 import useModelTransferJobs from '~/app/hooks/useModelTransferJobs';
 import { useModelRegistryAPI } from '~/app/hooks/useModelRegistryAPI';
@@ -129,10 +129,9 @@ describe('useModelTransferJobs', () => {
     // toggle hasActiveJobs to true and cause a re-render with refreshRate = POLL_INTERVAL.
     const capturedCallback = getCapturedCallback();
     expect(capturedCallback).toBeDefined();
-    await capturedCallback?.({});
-
-    // Wait for the hook to re-render after state update
-    await renderResult.waitForNextUpdate();
+    await act(async () => {
+      await capturedCallback?.({});
+    });
 
     // The latest call to useFetchState should have refreshRate set to POLL_INTERVAL
     const lastCallOptions = optionsCalls[optionsCalls.length - 1];
@@ -234,7 +233,9 @@ describe('useModelTransferJobs', () => {
     // so refreshRate should remain undefined (no need to wait for another update).
     const capturedCallback = getCapturedCallback();
     expect(capturedCallback).toBeDefined();
-    await capturedCallback?.({});
+    await act(async () => {
+      await capturedCallback?.({});
+    });
 
     const lastCallOptions = optionsCalls[optionsCalls.length - 1];
     expect(lastCallOptions.refreshRate).toBeUndefined();
diff --git a/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatus.tsx b/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatus.tsx
index afb1d181f6..9023ac48e3 100644
--- a/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatus.tsx
+++ b/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatus.tsx
@@ -38,6 +38,7 @@ const CatalogSourceStatus: React.FC<CatalogSourceStatusProps> = ({ catalogSource
   const startingOrUnknownLabel = (
     <Label
       color="grey"
+      variant="outline"
       icon={<InProgressIcon />}
       data-testid={`source-status-${catalogSourcesLoadError ? 'unknown' : 'starting'}-${catalogSourceConfig.id}`}
     >
@@ -53,7 +54,11 @@ const CatalogSourceStatus: React.FC<CatalogSourceStatusProps> = ({ catalogSource
   switch (matchingSource.status) {
     case CatalogSourceStatusEnum.AVAILABLE:
       return (
-        <Label status="success" data-testid={`source-status-connected-${catalogSourceConfig.id}`}>
+        <Label
+          status="success"
+          variant="outline"
+          data-testid={`source-status-connected-${catalogSourceConfig.id}`}
+        >
           Ready
         </Label>
       );
@@ -65,7 +70,11 @@ const CatalogSourceStatus: React.FC<CatalogSourceStatusProps> = ({ catalogSource
         <>
           <Stack hasGutter>
             <StackItem>
-              <Label status="danger" data-testid={`source-status-failed-${catalogSourceConfig.id}`}>
+              <Label
+                status="danger"
+                variant="outline"
+                data-testid={`source-status-failed-${catalogSourceConfig.id}`}
+              >
                 Failed
               </Label>
             </StackItem>
diff --git a/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatusErrorModal.tsx b/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatusErrorModal.tsx
index 6b85582aa6..c53b56315a 100644
--- a/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatusErrorModal.tsx
+++ b/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatusErrorModal.tsx
@@ -27,7 +27,7 @@ const CatalogSourceStatusErrorModal: React.FC<CatalogSourceStatusErrorModalProps
     <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
       <FlexItem>Source status</FlexItem>
       <FlexItem>
-        <Label color="red" icon={<ExclamationCircleIcon />}>
+        <Label status="danger" variant="outline" icon={<ExclamationCircleIcon />}>
           Failed
         </Label>
       </FlexItem>
diff --git a/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/__tests__/CatalogSourceStatus.spec.tsx b/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/__tests__/CatalogSourceStatus.spec.tsx
new file mode 100644
index 0000000000..5994d84728
--- /dev/null
+++ b/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/__tests__/CatalogSourceStatus.spec.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  ModelCatalogSettingsContext,
+  ModelCatalogSettingsContextType,
+} from '~/app/context/modelCatalogSettings/ModelCatalogSettingsContext';
+import { CatalogSourceConfig, CatalogSourceType } from '~/app/modelCatalogTypes';
+import CatalogSourceStatus from '~/app/pages/modelCatalogSettings/components/CatalogSourceStatus';
+
+const mockConfig: CatalogSourceConfig = {
+  id: 'test-source',
+  name: 'Test Source',
+  type: CatalogSourceType.YAML,
+  enabled: true,
+};
+
+const defaultPagination = { size: 0, pageSize: 10, nextPageToken: '' };
+
+const renderWithContext = (
+  config: CatalogSourceConfig,
+  contextOverrides: Partial<ModelCatalogSettingsContextType>,
+) => {
+  const defaultContext: ModelCatalogSettingsContextType = {
+    apiState: {
+      apiAvailable: false,
+      api: null as unknown as ModelCatalogSettingsContextType['apiState']['api'],
+    },
+    refreshAPIState: jest.fn(),
+    catalogSourceConfigs: null,
+    catalogSourceConfigsLoaded: false,
+    catalogSourceConfigsLoadError: undefined,
+    refreshCatalogSourceConfigs: jest.fn(),
+    catalogSources: null,
+    catalogSourcesLoaded: true,
+    catalogSourcesLoadError: undefined,
+    refreshCatalogSources: jest.fn(),
+    ...contextOverrides,
+  };
+
+  return render(
+    <ModelCatalogSettingsContext.Provider value={defaultContext}>
+      <CatalogSourceStatus catalogSourceConfig={config} />
+    </ModelCatalogSettingsContext.Provider>,
+  );
+};
+
+describe('CatalogSourceStatus', () => {
+  it('renders "Ready" label with outline variant', () => {
+    renderWithContext(mockConfig, {
+      catalogSources: {
+        ...defaultPagination,
+        items: [{ id: 'test-source', name: 'Test', labels: [], status: 'available' }],
+      },
+      catalogSourcesLoaded: true,
+    });
+
+    const label = screen.getByTestId('source-status-connected-test-source');
+    expect(screen.getByText('Ready')).toBeVisible();
+    expect(label.className).toMatch(/outline/);
+    expect(label.className).not.toMatch(/filled/);
+  });
+
+  it('renders "Failed" label with outline variant', () => {
+    renderWithContext(mockConfig, {
+      catalogSources: {
+        ...defaultPagination,
+        items: [
+          {
+            id: 'test-source',
+            name: 'Test',
+            labels: [],
+            status: 'error',
+            error: 'Connection refused',
+          },
+        ],
+      },
+      catalogSourcesLoaded: true,
+    });
+
+    const label = screen.getByTestId('source-status-failed-test-source');
+    expect(screen.getByText('Failed')).toBeVisible();
+    expect(label.className).toMatch(/outline/);
+    expect(label.className).not.toMatch(/filled/);
+  });
+
+  it('renders "Starting" label with outline variant when source has no status', () => {
+    renderWithContext(mockConfig, {
+      catalogSources: {
+        ...defaultPagination,
+        items: [{ id: 'test-source', name: 'Test', labels: [] }],
+      },
+      catalogSourcesLoaded: true,
+    });
+
+    const label = screen.getByTestId('source-status-starting-test-source');
+    expect(screen.getByText('Starting')).toBeVisible();
+    expect(label.className).toMatch(/outline/);
+  });
+
+  it('renders "Unknown" label with outline variant when there is a load error', () => {
+    renderWithContext(mockConfig, {
+      catalogSources: null,
+      catalogSourcesLoaded: true,
+      catalogSourcesLoadError: new Error('API error'),
+    });
+
+    const label = screen.getByTestId('source-status-unknown-test-source');
+    expect(screen.getByText('Unknown')).toBeVisible();
+    expect(label.className).toMatch(/outline/);
+  });
+
+  it('renders "-" for default sources', () => {
+    renderWithContext({ ...mockConfig, isDefault: true }, { catalogSourcesLoaded: true });
+    expect(screen.getByText('-')).toBeVisible();
+  });
+
+  it('renders "-" for disabled sources', () => {
+    renderWithContext({ ...mockConfig, enabled: false }, { catalogSourcesLoaded: true });
+    expect(screen.getByText('-')).toBeVisible();
+  });
+});
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobStatusModal.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobStatusModal.tsx
index 7febf965b3..49ee535696 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobStatusModal.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobStatusModal.tsx
@@ -88,7 +88,12 @@ const ModelTransferJobStatusModal: React.FC<ModelTransferJobStatusModalProps> =
     <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
       <FlexItem>{getModalTitle(job.uploadIntent)}</FlexItem>
       <FlexItem>
-        <Label color={statusInfo.color} icon={statusInfo.icon}>
+        <Label
+          color={statusInfo.color}
+          status={statusInfo.status}
+          icon={statusInfo.icon}
+          variant="outline"
+        >
           {statusInfo.label}
         </Label>
       </FlexItem>
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow.tsx
index 656ca52ba3..63c9e9e981 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow.tsx
@@ -26,20 +26,21 @@ export const getStatusLabel = (
   status: ModelTransferJobStatus,
 ): {
   label: string;
-  color: React.ComponentProps<typeof Label>['color'];
+  color?: React.ComponentProps<typeof Label>['color'];
+  status?: React.ComponentProps<typeof Label>['status'];
   icon: React.ReactNode;
 } => {
   switch (status) {
     case ModelTransferJobStatus.COMPLETED:
-      return { label: 'Complete', color: 'green', icon: <CheckCircleIcon /> };
+      return { label: 'Complete', status: 'success', icon: <CheckCircleIcon /> };
     case ModelTransferJobStatus.RUNNING:
       return { label: 'Running', color: 'blue', icon: <InProgressIcon /> };
     case ModelTransferJobStatus.PENDING:
-      return { label: 'Pending', color: 'grey', icon: <PendingIcon /> };
+      return { label: 'Pending', color: 'purple', icon: <PendingIcon /> };
     case ModelTransferJobStatus.FAILED:
-      return { label: 'Failed', color: 'red', icon: <ExclamationCircleIcon /> };
+      return { label: 'Failed', status: 'danger', icon: <ExclamationCircleIcon /> };
     case ModelTransferJobStatus.CANCELLED:
-      return { label: 'Cancelled', color: 'grey', icon: <BanIcon /> };
+      return { label: 'Canceled', color: 'grey', icon: <BanIcon /> };
     default:
       return { label: status, color: 'grey', icon: null };
   }
@@ -139,8 +140,10 @@ const ModelTransferJobTableRow: React.FC<ModelTransferJobTableRowProps> = ({
               <FlexItem>
                 <Label
                   color={statusInfo.color}
+                  status={statusInfo.status}
                   icon={statusInfo.icon}
                   data-testid="job-status"
+                  variant="filled"
                   isClickable
                   onClick={() => setIsStatusModalOpen(true)}
                 >
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/ModelTransferJobStatusModal.spec.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/ModelTransferJobStatusModal.spec.tsx
index 038331d45a..746b2a5cd4 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/ModelTransferJobStatusModal.spec.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/ModelTransferJobStatusModal.spec.tsx
@@ -54,6 +54,25 @@ describe('ModelTransferJobStatusModal', () => {
     });
   });
 
+  it('renders the status label in the modal title with outline variant', () => {
+    const job = mockModelTransferJob({
+      status: ModelTransferJobStatus.COMPLETED,
+      namespace: 'kubeflow',
+    });
+
+    mockUseFetchState.mockReturnValue([[], true, undefined, jest.fn()]);
+
+    render(<ModelTransferJobStatusModal job={job} isOpen onClose={jest.fn()} />);
+
+    const label = screen.getByText('Complete');
+    expect(label).toBeVisible();
+
+    const labelWrapper = label.closest('span.pf-v6-c-label');
+    expect(labelWrapper).not.toBeNull();
+    expect(labelWrapper!.className).toMatch(/outline/);
+    expect(labelWrapper!.className).not.toMatch(/filled/);
+  });
+
   it('shows unknown failure reason and danger alert when events fail to load', () => {
     // Arrange job without an explicit errorMessage so the fallback text is used.
     const job = mockModelTransferJob({
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/getStatusLabel.spec.ts b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/getStatusLabel.spec.ts
new file mode 100644
index 0000000000..87cc38c19f
--- /dev/null
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/getStatusLabel.spec.ts
@@ -0,0 +1,21 @@
+import { ModelTransferJobStatus } from '~/app/types';
+import { getStatusLabel } from '~/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow';
+
+describe('getStatusLabel', () => {
+  it.each([
+    [ModelTransferJobStatus.COMPLETED, 'Complete', undefined, 'success'],
+    [ModelTransferJobStatus.RUNNING, 'Running', 'blue', undefined],
+    [ModelTransferJobStatus.PENDING, 'Pending', 'purple', undefined],
+    [ModelTransferJobStatus.FAILED, 'Failed', undefined, 'danger'],
+    [ModelTransferJobStatus.CANCELLED, 'Canceled', 'grey', undefined],
+  ])(
+    'returns correct label, color/status, and icon for %s',
+    (status, expectedLabel, expectedColor, expectedStatus) => {
+      const result = getStatusLabel(status);
+      expect(result.label).toBe(expectedLabel);
+      expect(result.color).toBe(expectedColor);
+      expect(result.status).toBe(expectedStatus);
+      expect(result.icon).toBeDefined();
+    },
+  );
+});
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ArchiveModelVersionDetails.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ArchiveModelVersionDetails.tsx
index 2023666ee8..b08c7afbe4 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ArchiveModelVersionDetails.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ArchiveModelVersionDetails.tsx
@@ -63,7 +63,7 @@ const ArchiveModelVersionDetails: React.FC<ArchiveModelVersionDetailsProps> = ({
               <Content>{mv.name}</Content>
             </FlexItem>
             <FlexItem>
-              <Label>Archived</Label>
+              <Label variant="outline">Archived</Label>
             </FlexItem>
           </Flex>
         )
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionArchiveDetails.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionArchiveDetails.tsx
index a4b4e1e55c..bf4c365bd8 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionArchiveDetails.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionArchiveDetails.tsx
@@ -74,7 +74,7 @@ const ModelVersionsArchiveDetails: React.FC<ModelVersionsArchiveDetailsProps> =
           mv && (
             <Flex alignItems={{ default: 'alignItemsCenter' }}>
               <FlexItem>{mv.name}</FlexItem>
-              <Label>Archived</Label>
+              <Label variant="outline">Archived</Label>
             </Flex>
           )
         }
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelArchiveDetails.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelArchiveDetails.tsx
index 5542635537..f8a9d03a2e 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelArchiveDetails.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelArchiveDetails.tsx
@@ -54,7 +54,7 @@ const RegisteredModelsArchiveDetails: React.FC<RegisteredModelsArchiveDetailsPro
           rm && (
             <Flex alignItems={{ default: 'alignItemsCenter' }}>
               <FlexItem>{rm.name}</FlexItem>
-              <Label>Archived</Label>
+              <Label variant="outline">Archived</Label>
             </Flex>
           )
         }
diff --git a/clients/ui/frontend/src/app/pages/settings/ModelRegistriesTableRow.tsx b/clients/ui/frontend/src/app/pages/settings/ModelRegistriesTableRow.tsx
index 43086dcab0..8f8042b83f 100644
--- a/clients/ui/frontend/src/app/pages/settings/ModelRegistriesTableRow.tsx
+++ b/clients/ui/frontend/src/app/pages/settings/ModelRegistriesTableRow.tsx
@@ -43,7 +43,10 @@ const ModelRegistriesTableRow: React.FC<ModelRegistriesTableRowProps> = ({
         )}
       </Td>
       <Td dataLabel="Status" style={{ verticalAlign: 'middle' }}>
-        <ModelRegistryTableRowStatus conditions={mr.status?.conditions} />
+        <ModelRegistryTableRowStatus
+          conditions={mr.status?.conditions}
+          deletionTimestamp={mr.metadata.deletionTimestamp}
+        />
       </Td>
       <Td modifier="fitContent" style={{ verticalAlign: 'middle' }}>
         {filteredRoleBindings.length === 0 ? (
diff --git a/clients/ui/frontend/src/app/pages/settings/ModelRegistryTableRowStatus.tsx b/clients/ui/frontend/src/app/pages/settings/ModelRegistryTableRowStatus.tsx
index 405e71a055..90e161ee9b 100644
--- a/clients/ui/frontend/src/app/pages/settings/ModelRegistryTableRowStatus.tsx
+++ b/clients/ui/frontend/src/app/pages/settings/ModelRegistryTableRowStatus.tsx
@@ -17,8 +17,9 @@ enum ModelRegistryStatus {
 }
 
 enum ModelRegistryStatusLabel {
-  Progressing = 'Progressing',
-  Available = 'Available',
+  Starting = 'Starting',
+  Stopping = 'Stopping',
+  Ready = 'Ready',
   Degrading = 'Degrading',
   Unavailable = 'Unavailable',
 }
@@ -29,23 +30,30 @@ enum ConditionStatus {
 }
 interface ModelRegistryTableRowStatusProps {
   conditions: K8sCondition[] | undefined;
+  deletionTimestamp?: string;
 }
 
 export const ModelRegistryTableRowStatus: React.FC<ModelRegistryTableRowStatusProps> = ({
   conditions,
+  deletionTimestamp,
 }) => {
   const conditionsMap =
     conditions?.reduce((acc: Record<string, K8sCondition | undefined>, condition) => {
       acc[condition.type] = condition;
       return acc;
     }, {}) ?? {};
-  let statusLabel: string = ModelRegistryStatusLabel.Progressing;
+  let statusLabel: string = ModelRegistryStatusLabel.Starting;
   let icon = <InProgressIcon />;
   let status: React.ComponentProps<typeof Label>['status'];
+  let color: React.ComponentProps<typeof Label>['color'] = 'blue';
   let popoverMessages: string[] = [];
   let popoverTitle = '';
 
-  if (Object.values(conditionsMap).length) {
+  if (deletionTimestamp) {
+    statusLabel = ModelRegistryStatusLabel.Stopping;
+    icon = <InProgressIcon className="kubeflow-u-spin" />;
+    color = 'grey';
+  } else if (Object.values(conditionsMap).length) {
     const {
       [ModelRegistryStatus.Available]: availableCondition,
       [ModelRegistryStatus.Progressing]: progressCondition,
@@ -70,24 +78,26 @@ export const ModelRegistryTableRowStatus: React.FC<ModelRegistryTableRowStatusPr
       statusLabel = ModelRegistryStatusLabel.Unavailable;
       icon = <ExclamationTriangleIcon />;
       status = 'warning';
+      color = undefined;
     }
     // Degrading
     else if (degradedCondition?.status === ConditionStatus.True) {
       statusLabel = ModelRegistryStatusLabel.Degrading;
       icon = <InProgressIcon className="kubeflow-u-spin" />;
+      color = 'grey';
       popoverTitle = 'Service is degrading';
     }
-    // Available
+    // Ready
     else if (availableCondition?.status === ConditionStatus.True) {
-      statusLabel = ModelRegistryStatusLabel.Available;
+      statusLabel = ModelRegistryStatusLabel.Ready;
       icon = <CheckCircleIcon />;
       status = 'success';
+      color = undefined;
     }
-    // Progressing
+    // Starting
     else if (progressCondition?.status === ConditionStatus.True) {
-      statusLabel = ModelRegistryStatusLabel.Progressing;
+      statusLabel = ModelRegistryStatusLabel.Starting;
       icon = <InProgressIcon className="kubeflow-u-spin" />;
-      status = 'info';
     }
   }
   // Handle popover logic for Unavailable status
@@ -130,7 +140,9 @@ export const ModelRegistryTableRowStatus: React.FC<ModelRegistryTableRowStatusPr
         : {})}
       data-testid="model-registry-label"
       icon={icon}
+      color={color}
       status={status}
+      variant={isClickable ? 'filled' : 'outline'}
       isCompact
     >
       {statusLabel}
diff --git a/clients/ui/frontend/src/app/pages/settings/__tests__/ModelRegistryTableRowStatus.spec.tsx b/clients/ui/frontend/src/app/pages/settings/__tests__/ModelRegistryTableRowStatus.spec.tsx
index 30cc8aea13..dc08587fa8 100644
--- a/clients/ui/frontend/src/app/pages/settings/__tests__/ModelRegistryTableRowStatus.spec.tsx
+++ b/clients/ui/frontend/src/app/pages/settings/__tests__/ModelRegistryTableRowStatus.spec.tsx
@@ -158,7 +158,7 @@ describe('ModelRegistryTableRowStatus', () => {
     ).toBeVisible();
   });
 
-  it('renders "Available" status', () => {
+  it('renders "Ready" status', () => {
     render(
       <ModelRegistryTableRowStatus
         conditions={[
@@ -167,9 +167,9 @@ describe('ModelRegistryTableRowStatus', () => {
         ]}
       />,
     );
-    expect(screen.getByText('Available')).toBeVisible();
+    expect(screen.getByText('Ready')).toBeVisible();
   });
-  it('renders "Progressing" status', async () => {
+  it('renders "Unavailable" status', async () => {
     const user = userEvent.setup();
 
     render(
@@ -221,7 +221,7 @@ describe('ModelRegistryTableRowStatus', () => {
     expect(degradingText).toBeInTheDocument();
   });
 
-  it('renders "Progressing" status when popover message contains "ContainerCreating"', async () => {
+  it('renders "Starting" status when popover message contains "ContainerCreating"', async () => {
     render(
       <ModelRegistryTableRowStatus
         conditions={[
@@ -235,17 +235,17 @@ describe('ModelRegistryTableRowStatus', () => {
       />,
     );
 
-    expect(screen.getByText('Progressing')).toBeVisible();
+    expect(screen.getByText('Starting')).toBeVisible();
   });
 
-  it('renders "Progressing" status when conditions are empty', () => {
+  it('renders "Starting" status when conditions are empty', () => {
     render(<ModelRegistryTableRowStatus conditions={[]} />);
-    expect(screen.getByText('Progressing')).toBeVisible();
+    expect(screen.getByText('Starting')).toBeVisible();
   });
 
-  it('renders "Progressing" status when conditions are undefined', () => {
+  it('renders "Starting" status when conditions are undefined', () => {
     render(<ModelRegistryTableRowStatus conditions={undefined} />);
-    expect(screen.getByText('Progressing')).toBeVisible();
+    expect(screen.getByText('Starting')).toBeVisible();
   });
 
   it('renders "Unavailable" with multiple messages in popover', async () => {
@@ -286,6 +286,77 @@ describe('ModelRegistryTableRowStatus', () => {
     expect(screen.getByText('Some unavailable message 3')).toBeVisible();
   });
 
+  it('renders "Stopping" status when deletionTimestamp is set', () => {
+    render(
+      <ModelRegistryTableRowStatus
+        conditions={[{ status: 'True', type: 'Available' }]}
+        deletionTimestamp="2024-03-22T10:00:00Z"
+      />,
+    );
+    expect(screen.getByText('Stopping')).toBeVisible();
+  });
+
+  it('renders "Stopping" status even when conditions indicate Ready', () => {
+    render(
+      <ModelRegistryTableRowStatus
+        conditions={[
+          { status: 'True', type: 'Available' },
+          { status: 'False', type: 'Degraded' },
+        ]}
+        deletionTimestamp="2024-03-22T10:00:00Z"
+      />,
+    );
+    expect(screen.getByText('Stopping')).toBeVisible();
+    expect(screen.queryByText('Ready')).not.toBeInTheDocument();
+  });
+
+  describe('label variant styling', () => {
+    it('renders "Ready" label with outline variant (non-interactive)', () => {
+      render(
+        <ModelRegistryTableRowStatus
+          conditions={[
+            { status: 'False', type: 'Degraded' },
+            { status: 'True', type: 'Available' },
+          ]}
+        />,
+      );
+      const labelEl = screen.getByTestId('model-registry-label');
+      expect(labelEl.className).toMatch(/outline/);
+      expect(labelEl.className).not.toMatch(/filled/);
+    });
+
+    it('renders "Starting" label with outline variant (non-interactive)', () => {
+      render(<ModelRegistryTableRowStatus conditions={[]} />);
+      const labelEl = screen.getByTestId('model-registry-label');
+      expect(labelEl.className).toMatch(/outline/);
+    });
+
+    it('renders "Stopping" label with outline variant (non-interactive)', () => {
+      render(
+        <ModelRegistryTableRowStatus
+          conditions={[{ status: 'True', type: 'Available' }]}
+          deletionTimestamp="2024-03-22T10:00:00Z"
+        />,
+      );
+      const labelEl = screen.getByTestId('model-registry-label');
+      expect(labelEl.className).toMatch(/outline/);
+    });
+
+    it('renders "Unavailable" label with filled variant (interactive with popover)', () => {
+      render(
+        <ModelRegistryTableRowStatus
+          conditions={[
+            { status: 'False', type: 'Available', message: 'Service is unavailable' },
+            { status: 'False', type: 'IstioAvailable', message: 'Istio is unavailable' },
+          ]}
+        />,
+      );
+      const labelEl = screen.getByTestId('model-registry-label');
+      expect(labelEl.className).toMatch(/filled/);
+      expect(labelEl.className).not.toMatch(/outline/);
+    });
+  });
+
   it('renders "Unavailable" with an unknown status', async () => {
     const user = userEvent.setup();