diff --git a/data/projects.ts b/data/projects.ts
index ca7c54f..4c19746 100644
--- a/data/projects.ts
+++ b/data/projects.ts
@@ -30,9 +30,9 @@ export interface ProjectScope {
 }
 
 export interface ProjectScreenshot {
-  url: string;
-  width: number;
-  height: number;
+  url?: string;
+  width?: number;
+  height?: number;
 }
 
 export interface Link {
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 208c96f..1fb98a9 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -79,14 +79,16 @@ function ProjectItemCompact({ project }: { project: Project }) {
       className='grid grid-cols-1 gap-4 p-5 md:grid-cols-3 '
     >
       <div className='mx-auto w-36'>
-        <Image
-          src={project.screenshots.logo.url}
-          alt={project.name}
-          layout='responsive'
-          width={150}
-          height={150}
-          objectFit='contain'
-        />
+        {project.screenshots.logo.url && (
+          <Image
+            src={project.screenshots.logo.url}
+            alt={project.name}
+            layout='responsive'
+            width={150}
+            height={150}
+            objectFit='contain'
+          />
+        )}
       </div>
       <div className='md:col-span-2'>
         <h3 className='prose prose-xl dark:prose-invert'>{project.name}</h3>
diff --git a/src/pages/projects/[slug].tsx b/src/pages/projects/[slug].tsx
index 47a2315..1bd03a3 100644
--- a/src/pages/projects/[slug].tsx
+++ b/src/pages/projects/[slug].tsx
@@ -39,13 +39,17 @@ const ProjectDetail = ({ projectDetail }: { projectDetail: Project }) => {
                   <div className='mx-auto flex flex-row flex-wrap'>
                     <div className='mx-auto flex flex-grow basis-full'>
                       <div className='aspect-w-16 aspect-h-9 mx-auto w-full max-w-5xl rounded-b-none lg:rounded-b-lg'>
-                        <Image
-                          alt={title}
-                          src={screenshots.webScreenshot.url}
-                          layout='fill'
-                          objectFit='cover'
-                          className='rounded-lg group-hover:opacity-75'
-                        />
+                        {screenshots?.webScreenshot?.url ? (
+                          <Image
+                            alt={title}
+                            src={screenshots.webScreenshot.url}
+                            layout='fill'
+                            objectFit='cover'
+                            className='rounded-lg group-hover:opacity-75'
+                          />
+                        ) : (
+                          <div> </div>
+                        )}
                       </div>
                     </div>
                   </div>
diff --git a/src/pages/projects/index.tsx b/src/pages/projects/index.tsx
index 6aae2d9..415479c 100644
--- a/src/pages/projects/index.tsx
+++ b/src/pages/projects/index.tsx
@@ -67,13 +67,15 @@ export function ProjectListItem({
       <div className='mx-auto grid w-full grid-cols-1 gap-4 py-7 dark:bg-transparent md:grid-cols-3 lg:grid-cols-4'>
         <div className='mx-auto w-full items-center px-4 text-center'>
           <figure>
-            <Image
-              src={screenshots.logo.url}
-              alt={`${name} logo`}
-              className='rounded-xl'
-              width={300}
-              height={300}
-            />
+            {screenshots.logo.url && (
+              <Image
+                src={screenshots.logo.url}
+                alt={`${name} logo`}
+                className='rounded-xl'
+                width={300}
+                height={300}
+              />
+            )}
           </figure>
           <p className='break-word px-7 text-center'>{subTitle}</p>
         </div>
@@ -147,13 +149,15 @@ export function ProjectGridItem({
       key={id}
     >
       <figure className='px-10 pt-10'>
-        <Image
-          src={screenshots.logo.url}
-          alt={`${name} logo`}
-          className='rounded-xl'
-          width={300}
-          height={300}
-        />
+        {screenshots.logo.url && (
+          <Image
+            src={screenshots.logo.url}
+            alt={`${name} logo`}
+            className='rounded-xl'
+            width={300}
+            height={300}
+          />
+        )}
       </figure>
       <div className='card-body items-center text-center'>
         <h2 className='card-title'>{title}</h2>