diff --git a/_portfolio/sample.mdx b/_portfolio/sample.mdx
index c2ba4e9..5cb7b21 100644
--- a/_portfolio/sample.mdx
+++ b/_portfolio/sample.mdx
@@ -2,6 +2,7 @@
 title: 'Sample Portfolio Project'
 description: 'Sample description'
 date: '2020-01-14'
+image: 'https://res.cloudinary.com/dun9hhyz1/image/upload/v1630772436/personal-website/portfolio/sample_jpdjsw.jpg'
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dignissim orci, a aliquet leo vehicula in. Proin accumsan, justo luctus tristique ornare, tortor eros sodales arcu, quis maximus nunc tellus eu erat. Proin nisl lorem, congue at dignissim tempor, condimentum nec augue. Duis vulputate, metus eu luctus facilisis, elit mauris cursus felis, ullamcorper tempor diam est vel felis. Sed scelerisque, risus quis semper consectetur, eros lectus ornare turpis, et accumsan turpis nisi et erat. Donec sit amet elementum nunc. Nam eget dolor quis dolor rhoncus molestie id ut nisi. Vivamus suscipit ligula in sem tempor, sit amet lacinia augue luctus. Ut quis urna varius, volutpat sem eget, tincidunt augue. Duis porta dui nec sem tincidunt, ac porttitor magna molestie. Pellentesque massa ligula, malesuada ut urna nec, blandit volutpat libero. Cras sed laoreet massa.
diff --git a/components/Card.tsx b/components/Card.tsx
index 2d7a118..d99232d 100644
--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -11,29 +11,35 @@ interface Props {
 	onClick?: () => void;
 }
 
-const StyledCard = styled.div<{ dark: boolean }>`
+const StyledCard = styled.div<{ dark: boolean; image: boolean }>`
 	cursor: pointer;
-	padding: 1rem 0rem;
 	width: 100%;
 	display: grid;
-	align-items: center;
-	background: ${({ dark, theme }) => (dark ? '#2f2f2f' : theme.colors.dark.text)};
+	grid-template-columns: auto 150px;
+	align-items: stretch;
 	box-shadow: ${({ dark }) => !dark && `1px 1px 10px 0px rgba(0, 0, 0, 0.15)`};
 	transition: box-shadow 250ms ease-in-out, color 0ms ease-in-out;
 
-	@media (max-width: 768px) {
-		padding: 0.5rem 0rem;
-	}
-
 	&:hover {
-		background: #1573ca;
-		color: ${({ theme }) => theme.colors.dark.text};
-		box-shadow: ${({ dark }) => !dark && '5px 2px 26px 6px rgba(21, 115, 202, 0.30)'};
+		& > div {
+			background: #1573ca;
+			color: ${({ theme }) => theme.colors.dark.text};
+		}
+
+		img {
+			filter: ${({ image }) => (image ? 'grayscale(80%)' : 'none')};
+		}
 	}
 
-	div {
+	& > div {
+		padding: 1rem 0rem;
+		background: ${({ dark, theme }) => (dark ? '#2f2f2f' : theme.colors.dark.text)};
 		display: grid;
 		row-gap: 0.5rem;
+
+		@media (max-width: 768px) {
+			padding: 0.75rem 0rem;
+		}
 	}
 
 	h3,
@@ -66,19 +72,23 @@ const Card: FC<Props> = ({ title, description, image, tags, onClick }) => {
 	const { dark } = useContext(DarkModeContext);
 
 	return (
-		<StyledCard dark={dark} onClick={onClick}>
+		<StyledCard dark={dark} onClick={onClick} image={!!image}>
 			<div>
 				<h3>{title}</h3>
-				{image && (
-					<Image src={image} className='image' width='auto' height='auto' layout='responsive' />
-				)}
 				<p>{description}</p>
 				{tags && (
 					<div className='tags-wrapper'>
-						{tags && tags.map((tag, index) => <span key={index}>#{tag}&nbsp;</span>)}
+						{tags.map((tag, index) => (
+							<span key={index}>#{tag}&nbsp;</span>
+						))}
 					</div>
 				)}
 			</div>
+			{image ? (
+				<Image src={image} width={100} height={100} layout='responsive' />
+			) : (
+				<Image src='/no-image.png' width={100} height={100} layout='responsive' />
+			)}
 		</StyledCard>
 	);
 };
diff --git a/next.config.js b/next.config.js
index 7ed80c4..9a80df0 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,10 @@
 const withMDX = require('@next/mdx')({
 	extension: /\.mdx?$/
 });
+
 module.exports = withMDX({
-	pageExtensions: ['ts', 'tsx', 'md', 'mdx']
+	pageExtensions: ['ts', 'tsx', 'md', 'mdx'],
+	images: {
+		domains: ['res.cloudinary.com']
+	}
 });
diff --git a/pages/404.tsx b/pages/404.tsx
index 7840be2..5199786 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -56,9 +56,9 @@ const NotFound: FC = () => {
 			</Head>
 			<Wrapper>
 				<h1>404: This page could not be found</h1>
-				<div className='back' onClick={() => router.back()}>
+				<div className='back' onClick={() => router.push('/')}>
 					<IconButton icon='/icons/arrow-left.svg' />
-					<span>Go Back</span>
+					<span>Go Home</span>
 				</div>
 			</Wrapper>
 		</>
diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx
index a26827b..af843e4 100644
--- a/pages/blog/[slug].tsx
+++ b/pages/blog/[slug].tsx
@@ -41,6 +41,23 @@ const Wrapper = styled.div`
 			align-items: center;
 		}
 
+		.image {
+			height: 0;
+			width: 100%;
+			overflow: hidden;
+			padding-top: calc(591.44 / 1127.34 * 100%);
+			position: relative;
+			margin-bottom: 1rem;
+
+			img {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+			}
+		}
+
 		h1,
 		p,
 		.tags-wrapper {
@@ -145,6 +162,11 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
 			</Head>
 			<Wrapper>
 				<div className='meta'>
+					{frontMatter.image ? (
+						<div className='image'>
+							<img src={frontMatter.image} alt='portfolio project image' />
+						</div>
+					) : null}
 					<div className='back' onClick={() => router.back()}>
 						<IconButton icon='/icons/arrow-left.svg' />
 						<span>Back</span>
@@ -154,13 +176,13 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
 					<p>
 						By <b>{frontMatter.author}</b> on <b>{frontMatter.date}</b> ({stats.text})
 					</p>
-					{frontMatter.tags && (
+					{frontMatter.tags ? (
 						<div className='tags-wrapper'>
 							{frontMatter.tags.map((tag: string, index: number) => (
 								<span key={index}>#{tag}&nbsp;</span>
 							))}
 						</div>
-					)}
+					) : null}
 					<hr />
 				</div>
 				<MDXProvider components={{ code: CodeBlock }}>
diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
index c6d8929..afc8605 100644
--- a/pages/blog/index.tsx
+++ b/pages/blog/index.tsx
@@ -11,6 +11,7 @@ interface Props {
 		title: string;
 		author: string;
 		description: string;
+		image?: string;
 		slug: string;
 		date: string;
 		tags?: string[];
diff --git a/pages/portfolio/[slug].tsx b/pages/portfolio/[slug].tsx
index f20b4ad..8a27e47 100644
--- a/pages/portfolio/[slug].tsx
+++ b/pages/portfolio/[slug].tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useRef } from 'react';
 import { getPortfolioPorjectsSlugs, getPortfolioProjectdata } from '../../utils/portfolio';
 import { useRouter } from 'next/router';
 import { MdxRemote } from 'next-mdx-remote/types';
@@ -39,6 +39,23 @@ const Wrapper = styled.div`
 			align-items: center;
 		}
 
+		.image {
+			height: 0;
+			width: 100%;
+			overflow: hidden;
+			padding-top: calc(591.44 / 1127.34 * 100%);
+			position: relative;
+			margin-bottom: 1rem;
+
+			img {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+			}
+		}
+
 		h1,
 		p {
 			text-align: left;
@@ -88,6 +105,7 @@ const components = AllComponents;
 const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 	const content = hydrate(source, { components });
 	const router = useRouter();
+	const metaRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
 		window.scrollTo(0, 0);
@@ -125,20 +143,25 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 				<title>{frontMatter.title} | Hazem Krimi</title>
 			</Head>
 			<Wrapper>
-				<div className='meta'>
+				<div className='meta' ref={metaRef}>
+					{frontMatter.image ? (
+						<div className='image'>
+							<img src={frontMatter.image} alt='portfolio project image' />
+						</div>
+					) : null}
 					<div className='back' onClick={() => router.back()}>
 						<IconButton icon='/icons/arrow-left.svg' />
 						<span>Back</span>
 					</div>
 					<h1>{frontMatter.title}</h1>
 					<p>{frontMatter.description}</p>
-					{frontMatter.tags && (
+					{frontMatter.tags ? (
 						<div className='tags-wrapper'>
 							{frontMatter.tags.map((tag: string, index: number) => (
 								<span key={index}>#{tag}&nbsp;</span>
 							))}
 						</div>
-					)}
+					) : null}
 					<hr />
 				</div>
 				<MDXProvider components={{ code: CodeBlock }}>
diff --git a/pages/portfolio/index.tsx b/pages/portfolio/index.tsx
index df2e6f2..f6490b6 100644
--- a/pages/portfolio/index.tsx
+++ b/pages/portfolio/index.tsx
@@ -10,6 +10,7 @@ interface Props {
 	portfolioProjects: {
 		title: string;
 		description: string;
+		image?: string;
 		slug: string;
 		date: string;
 		tags?: string[];
diff --git a/public/no-image.png b/public/no-image.png
new file mode 100644
index 0000000..8b4b36d
Binary files /dev/null and b/public/no-image.png differ
diff --git a/utils/blog.ts b/utils/blog.ts
index a4c6c35..48ae207 100644
--- a/utils/blog.ts
+++ b/utils/blog.ts
@@ -15,6 +15,7 @@ export const getBlogPosts = () => {
 		const { data } = matter(fileContents);
 
 		const options = { month: 'long', day: 'numeric', year: 'numeric' };
+		// @ts-ignore
 		const formattedDate = new Date(data.date).toLocaleDateString('en-IN', options);
 
 		const frontmatter = {