diff --git a/web-app/src/containers/ModelInfoHoverCard.tsx b/web-app/src/containers/ModelInfoHoverCard.tsx
index 4735e72607..0a39724ba9 100644
--- a/web-app/src/containers/ModelInfoHoverCard.tsx
+++ b/web-app/src/containers/ModelInfoHoverCard.tsx
@@ -79,6 +79,15 @@ export const ModelInfoHoverCard = ({
           </span>
         </div>
       )
+    } else if (status === 'GREY') {
+      return (
+        <div className="flex items-start gap-2">
+          <div className="size-2 shrink-0 bg-neutral-500 rounded-full mt-1"></div>
+          <span className="text-neutral-500 font-medium">
+            Unable to determine model compatibility with your current device
+          </span>
+        </div>
+      )
     } else {
       return (
         <div className="flex items-start gap-2">
@@ -121,9 +130,7 @@ export const ModelInfoHoverCard = ({
               <>
                 <div>
                   <span className="text-main-view-fg/50 block">
-                    {isDefaultVariant
-                      ? 'Maybe Default Quantization'
-                      : 'Quantization'}
+                    {isDefaultVariant ? 'Default Quantization' : 'Quantization'}
                   </span>
                   <span className="text-main-view-fg font-medium mt-1 inline-block">
                     {variant?.model_id.split('-').pop()?.toUpperCase() || 'N/A'}
diff --git a/web-app/src/containers/ModelSupportStatus.tsx b/web-app/src/containers/ModelSupportStatus.tsx
index 43827f58e9..770d126f8f 100644
--- a/web-app/src/containers/ModelSupportStatus.tsx
+++ b/web-app/src/containers/ModelSupportStatus.tsx
@@ -24,7 +24,7 @@ export const ModelSupportStatus = ({
   className,
 }: ModelSupportStatusProps) => {
   const [modelSupportStatus, setModelSupportStatus] = useState<
-    'RED' | 'YELLOW' | 'GREEN' | 'LOADING' | null
+    'RED' | 'YELLOW' | 'GREEN' | 'LOADING' | null | 'GREY'
   >(null)
 
   // Helper function to check model support with proper path resolution
@@ -32,7 +32,7 @@ export const ModelSupportStatus = ({
     async (
       id: string,
       ctxSize: number
-    ): Promise<'RED' | 'YELLOW' | 'GREEN' | null> => {
+    ): Promise<'RED' | 'YELLOW' | 'GREEN' | 'GREY' | null> => {
       try {
         const janDataFolder = await getJanDataFolderPath()
 
diff --git a/web-app/src/routes/hub/$modelId.tsx b/web-app/src/routes/hub/$modelId.tsx
index 2d0eecc70d..5ecedb43d7 100644
--- a/web-app/src/routes/hub/$modelId.tsx
+++ b/web-app/src/routes/hub/$modelId.tsx
@@ -64,7 +64,7 @@ function HubModelDetail() {
 
   // State for model support status
   const [modelSupportStatus, setModelSupportStatus] = useState<
-    Record<string, 'RED' | 'YELLOW' | 'GREEN' | 'LOADING'>
+    Record<string, 'RED' | 'YELLOW' | 'GREEN' | 'LOADING' | 'GREY'>
   >({})
 
   useEffect(() => {
diff --git a/web-app/src/services/__tests__/models.test.ts b/web-app/src/services/__tests__/models.test.ts
index 286fb01a43..b6b61e0ef7 100644
--- a/web-app/src/services/__tests__/models.test.ts
+++ b/web-app/src/services/__tests__/models.test.ts
@@ -924,7 +924,7 @@ describe('models service', () => {
       expect(result).toBe('YELLOW') // Should use fallback
     })
 
-    it('should return RED when there is an error', async () => {
+    it('should return GREY when there is an error', async () => {
       const mockEngineWithError = {
         ...mockEngine,
         isModelSupported: vi.fn().mockRejectedValue(new Error('Test error')),
@@ -934,7 +934,7 @@ describe('models service', () => {
 
       const result = await isModelSupported('/path/to/model.gguf')
 
-      expect(result).toBe('RED')
+      expect(result).toBe('GREY')
     })
   })
 })
diff --git a/web-app/src/services/models.ts b/web-app/src/services/models.ts
index bcd0c788ca..f851349981 100644
--- a/web-app/src/services/models.ts
+++ b/web-app/src/services/models.ts
@@ -592,7 +592,7 @@ export const checkMmprojExists = async (modelId: string): Promise<boolean> => {
 export const isModelSupported = async (
   modelPath: string,
   ctxSize?: number
-): Promise<'RED' | 'YELLOW' | 'GREEN'> => {
+): Promise<'RED' | 'YELLOW' | 'GREEN' | 'GREY'> => {
   try {
     const engine = getEngine('llamacpp') as AIEngine & {
       isModelSupported?: (
@@ -608,6 +608,6 @@ export const isModelSupported = async (
     return 'YELLOW' // Conservative fallback
   } catch (error) {
     console.error(`Error checking model support for ${modelPath}:`, error)
-    return 'RED' // Error state, assume not supported
+    return 'GREY' // Error state, assume not supported
   }
 }