diff --git a/src/components/PreviewProject.tsx b/src/components/PreviewProject.tsx
index cddae500ba..64511d62eb 100644
--- a/src/components/PreviewProject.tsx
+++ b/src/components/PreviewProject.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Box, Spinner } from '@chakra-ui/core'
-import { Project } from '@prisma/client'
+import { Box, Spinner, Icon, Text, Avatar } from '@chakra-ui/core'
+import { Project, User } from '@prisma/client'
 
 interface Props {
-  project: Project
+  project: Project & { user: User }
 }
 
 const PreviewProject = (props: Props) => {
@@ -11,9 +11,31 @@ const PreviewProject = (props: Props) => {
     <Box mb={3} maxW="100%">
       {!props.project ? (
         <Spinner m="0 auto" color="white" size="xl" mt="3rem" />
+      ) : props.project.thumbnail ? (
+        <img
+          src={props.project.thumbnail}
+          alt={props.project.projectName}
+          style={{ height: '200px', width: '100%' }}
+        />
       ) : (
-        <img src={props.project.thumbnail} alt={props.project.projectName} />
+        <Box textAlign="center" margin={0} h="200px" w="100%">
+          <Icon name="warning" size="32px" color="red.500" mt={20} />
+          <Text mt={3}>No screenshot for this project</Text>
+        </Box>
       )}
+
+      <Box w="100%">
+        <Text fontSize="xl">{props.project.projectName}</Text>
+        <Text fontSize="md" mt={2} textAlign="right" w="100%">
+          <Avatar
+            size="xs"
+            mr={2}
+            name={props.project.user.name || ''}
+            src={props.project.user.image || ''}
+          />
+          {props.project.user.name}
+        </Text>
+      </Box>
     </Box>
   )
 }
diff --git a/src/pages/project/public/index.tsx b/src/pages/project/public/index.tsx
index 0b1f02088c..348c56942e 100644
--- a/src/pages/project/public/index.tsx
+++ b/src/pages/project/public/index.tsx
@@ -5,7 +5,6 @@ import {
   Box,
   SimpleGrid,
   PseudoBox,
-  Avatar,
   RadioGroup,
   Radio,
   Spinner,
@@ -108,7 +107,7 @@ const ProjectList = () => {
               <Spinner m="0 auto" color="white" size="xl" mt="3rem" />
             </Box>
           ) : projects && projects?.project.length > 0 ? (
-            <SimpleGrid columns={[1, 1, 2, 3]} spacing={6} mt={10}>
+            <SimpleGrid columns={[1, 1, 2, 3]} spacing={24} mt={10}>
               {projects?.project.map((e: Project & { user: User }, i: number) =>
                 radioValue === 'all' ? (
                   <PseudoBox
@@ -125,17 +124,6 @@ const ProjectList = () => {
                     key={i}
                   >
                     <PreviewProject project={e} />
-
-                    <Text fontSize="xl">{e.projectName}</Text>
-                    <Text fontSize="md" mt={2} textAlign="right">
-                      <Avatar
-                        size="xs"
-                        mr={2}
-                        name={e.user.name || ''}
-                        src={e.user.image || ''}
-                      />
-                      {e.user.name}
-                    </Text>
                   </PseudoBox>
                 ) : (
                   radioValue === e.tag && (
@@ -153,16 +141,6 @@ const ProjectList = () => {
                       key={i}
                     >
                       <PreviewProject project={e} />
-                      <Text fontSize="xl">{e.projectName}</Text>
-                      <Text fontSize="md" mt={2} textAlign="right">
-                        <Avatar
-                          size="xs"
-                          mr={2}
-                          name={e.user.name || ''}
-                          src={e.user.image || ''}
-                        />
-                        {e.user.name}
-                      </Text>
                     </PseudoBox>
                   )
                 ),