diff --git a/src/components/ImageDiff.jsx b/src/components/ImageDiff.jsx
index 99f1473..a6044ad 100644
--- a/src/components/ImageDiff.jsx
+++ b/src/components/ImageDiff.jsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Table, Modal, Button, Tabs, Tab } from 'react-bootstrap';
 import ReactCompareImage from 'react-compare-image';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import ImageTable from './ImageTable';
 
 const HOST = 'https://s3-sj3.corp.adobe.com/milo';
 
@@ -53,7 +54,7 @@ const ImageDiff = ({ data, timestamp }) => {
   return (
     <div>
       <div className='text-xl m-3 text-blue-600'>Report Time: {timestamp}</div>
-      <div className='text-lg m-3 text-red-600'>Notes: no diff means the same, no image means not exist, number means how many diff images per device</div>
+      <div className='text-lg m-3 text-red-600'>Notes: a number specifies how many different images there are per device.</div>
       <Tabs defaultActiveKey={Object.keys(groupedData)[0]} className="mb-3">
         {Object.entries(groupedData).map(([segment, items], idx) => (
           <Tab eventKey={`tab-${segment}`} title={`${segment}(${groupDiffNumber[segment]})`} key={idx}>
@@ -74,9 +75,7 @@ const ImageDiff = ({ data, timestamp }) => {
                     {comparisons.map((item, index) => (
                       <tr key={index}>
                         <td>{item.order}</td>
-                        <td><img src={`${HOST}/${item.a}`} alt="Stable version" style={{ width: "100px", cursor: 'pointer' }} onClick={() => handleShow(`${HOST}/${item.a}`, '')} /></td>
-                        <td><img src={`${HOST}/${item.b}`} alt="Beta version" style={{ width: "100px", cursor: 'pointer' }} onClick={() => handleShow(`${HOST}/${item.b}`, '')} /></td>
-                        <td><img src={`${HOST}/${item.diff}`} alt="Differences version" style={{ width: "100px", cursor: 'pointer' }} onClick={() => handleShow(`${HOST}/${item.diff}`, '')} /></td>
+                        <ImageTable HOST={HOST} item={item} handleShow={handleShow} />
                         <td>
                           <Button variant="primary" onClick={() => handleShow(`${HOST}/${item.a}`, `${HOST}/${item.b}`)}>Compare Images</Button>
                         </td>
diff --git a/src/components/ImageTable.jsx b/src/components/ImageTable.jsx
new file mode 100644
index 0000000..b8eea8f
--- /dev/null
+++ b/src/components/ImageTable.jsx
@@ -0,0 +1,64 @@
+/* eslint-disable react/prop-types */
+import { useState, useEffect } from 'react';
+
+// Function to check if image exists
+const checkImageExists = (url) => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(true);
+    img.onerror = () => resolve(false);
+    img.src = url;
+  });
+};
+
+const ImageWithFallback = ({ src, alt, handleClick, style }) => {
+  const [imageExists, setImageExists] = useState(false);
+
+  useEffect(() => {
+    let isMounted = true;
+    checkImageExists(src).then((exists) => {
+      if (isMounted) setImageExists(exists);
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [src]);
+
+  if (!imageExists) {
+    if (alt.includes('Differences')) return 'No Difference';
+    return 'No Image';
+  }
+
+  return <img src={src} alt={alt} style={style} onClick={handleClick} />;
+};
+
+const ImageTable = ({ HOST, item, handleShow }) => (
+  <>
+    <td>
+      <ImageWithFallback 
+        src={`${HOST}/${item.a}`} 
+        alt="Stable version" 
+        style={{ width: "100px", cursor: 'pointer' }} 
+        handleClick={() => handleShow(`${HOST}/${item.a}`, '')} 
+      />
+    </td>
+    <td>
+      <ImageWithFallback 
+        src={`${HOST}/${item.b}`} 
+        alt="Beta version" 
+        style={{ width: "100px", cursor: 'pointer' }} 
+        handleClick={() => handleShow(`${HOST}/${item.b}`, '')} 
+      />
+    </td>
+    <td>
+      <ImageWithFallback 
+        src={`${HOST}/${item.diff}`} 
+        alt="Differences version" 
+        style={{ width: "100px", cursor: 'pointer' }} 
+        handleClick={() => handleShow(`${HOST}/${item.diff}`, '')} 
+      />
+    </td>
+  </>
+);
+
+export default ImageTable;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 471539c..6f2267d 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-
 const directories = ['sot', 'milo', 'feds', 'caas', 'uar', 'uar-ai'];
 
 const HomePage = () => {
@@ -26,17 +25,12 @@ const HomePage = () => {
     };
 
     return (
-        <div className={`${isDarkMode ? 'bg-gray-800' : 'bg-gray-200'}`}>
-            <div className="m-5">
-                <label className="flex cursor-pointer gap-2 justify-end pt-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                        <circle cx="12" cy="12" r="5"/>
-                        <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/>
-                    </svg>
-                    <input type="checkbox" checked={isDarkMode} onChange={handleThemeToggle} className="toggle theme-controller"/>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-                    </svg>
+        <div className={`${isDarkMode ? 'bg-black' : 'bg-white'}`}>
+            <div className="m-5 pt-4">
+                <label className="flex cursor-pointer gap-2 justify-end">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
+                <input type="checkbox" value="dark" className="toggle theme-controller" onChange={handleThemeToggle}/>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
                 </label>
                 <div className={`text-3xl text-center ${isDarkMode ? 'text-white' : 'text-black'}`}>Auto Tests</div>
             </div>
@@ -44,18 +38,18 @@ const HomePage = () => {
                 <div className={`text-2xl ${isDarkMode ? 'text-white' : 'text-black'}`}>Screenshot Tests:</div>
                 <div className='text-xl flex flex-row gap-6 m-3 flex-wrap'>
                     {directories.map((directory, index) => (
-                        <div className="card w-80 bg-base-100 shadow-xl flex" key={index}>
-                            <figure>
-                                <img src="dog.jpg" alt={`${index}`} />
-                            </figure>
-                            <div className="card-body items-center text-center">
-                                <h2 className={`card-title uppercase ${isDarkMode ? 'custom-white' : 'custom-black'}`}>{directory}</h2>
-                                <p className={`${isDarkMode ? 'text-gray-700' : 'text-gray-700'}`}>screenshots under three resolutions</p>
-                                <div className="card-actions">
-                                    <a className="btn btn-primary" href={`/imagediff/${directory}`}>Check</a>
-                                </div>
-                            </div>
+                    <div className="card w-80 bg-base-100 shadow-xl flex" key={index}>
+                        <figure>
+                        <img src="dog.jpg" alt={`${index}`} />
+                        </figure>
+                        <div className="card-body items-center text-center">
+                        <h2 className={`card-title uppercase ${isDarkMode ? 'text-white' : 'text-black'}`}>{directory}</h2>
+                        <p className={`${isDarkMode ? 'text-white' : 'text-black'}`}>screenshots under three resolutions</p>
+                        <div className="card-actions">
+                            <a className="btn btn-primary" href={`/imagediff/${directory}`}>Check</a>
+                        </div>
                         </div>
+                    </div>
                     ))}
                 </div>
             </div>
@@ -63,4 +57,4 @@ const HomePage = () => {
     );
 }
 
-export default HomePage;
+export default HomePage;
\ No newline at end of file