diff --git a/public/index.html b/public/index.html
index 4a58fcd..2319cfe 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
 		<meta charset="utf-8" />
 		<link
 			rel="icon"
-			href="https://raw.githubusercontent.com/diaid83/details/master/favicon.ico"
+			href="https://res.cloudinary.com/dadobos/image/upload/v1642766520/web/favicon_ugvc88.ico"
 			type="image/x-icon"
 		/>
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/src/components/main-card/MainCard.jsx b/src/components/main-card/MainCard.jsx
index 2099d83..c700435 100644
--- a/src/components/main-card/MainCard.jsx
+++ b/src/components/main-card/MainCard.jsx
@@ -11,17 +11,13 @@ import { useTheme } from '@mui/material/styles';
 
 import { Tilt } from './Tilt';
 
-// import { VioletColorWheel, SeaGreenCrayola } from 'themes/Colors';
-
 const MainCard = ({ imageURL, title, description, url }) => {
 	const theme = useTheme();
-	// const shadowColor =
-	// 	theme.palette.mode === 'dark' ? SeaGreenCrayola : VioletColorWheel;
+
 	const options = {
 		reverse: true,
 		speed: 1200,
-		easing:  'cubic-bezier(.09,.67,.54,.76)'
-		// reset: false,
+		easing: 'cubic-bezier(.09,.67,.54,.76)',
 	};
 
 	return (
@@ -35,10 +31,6 @@ const MainCard = ({ imageURL, title, description, url }) => {
 						mx: 'auto',
 						color: theme.palette.text.secondary,
 						backgroundColor: theme.palette.background.paper,
-						// '&:hover': {
-						// 	transition: 'all .7s ease',
-						// 	boxShadow: `1px 1px 20px 10px ${shadowColor}`,
-						// },
 					}}>
 					<CardMedia
 						component='img'
@@ -46,6 +38,9 @@ const MainCard = ({ imageURL, title, description, url }) => {
 						image={imageURL}
 						alt={title}
 					/>
+					{{ description } !== '' && (
+						<Typography variant='body2'>{description}</Typography>
+					)}
 					<CardActionArea>
 						<CardContent
 							color='white'
@@ -53,10 +48,6 @@ const MainCard = ({ imageURL, title, description, url }) => {
 							<Typography gutterBottom variant='h6' component='div'>
 								{title}
 							</Typography>
-							<Typography></Typography>
-							{{ description } !== '' && (
-								<Typography variant='body2'>{description}</Typography>
-							)}
 						</CardContent>
 					</CardActionArea>
 				</Card>
diff --git a/src/data/Data.jsx b/src/data/Data.jsx
index d0edf27..124fe80 100644
--- a/src/data/Data.jsx
+++ b/src/data/Data.jsx
@@ -1,65 +1,10 @@
-export const FreeCodeCampData = [
-	{
-		// videoURL:
-		// 	'https://res.cloudinary.com/dadobos/video/upload/v1653827756/web/TechnicalDocumentationPage_h03qkv',
-		imageURL:
-			'https://res.cloudinary.com/dadobos/image/upload/v1653827744/web/TechnicalDocumentationPage_pbudut',
-		title: 'Technical Documentation',
-		description: '',
-		url: 'https://codepen.io/diaid/full/PoopdWd',
-	},
-	{
-		// videoURL:
-		// 	'https://res.cloudinary.com/dadobos/video/upload/v1653827749/web/TributePage_iarfpr',
-		imageURL:
-			'https://res.cloudinary.com/dadobos/image/upload/v1653827749/web/TributePage_hpxmr6',
-		title: 'Tribut Page',
-		description: '',
-		url: 'https://codepen.io/diaid/full/MWWeorj',
-	},
-	{
-		// videoURL:
-		// 	'https://res.cloudinary.com/dadobos/video/upload/v1653827744/web/SurveyForm_g0ornr',
-		imageURL:
-			'https://res.cloudinary.com/dadobos/image/upload/v1653827742/web/SurveyForm_upho4b',
-		title: 'Survey Form',
-		description: '',
-		url: 'https://codepen.io/diaid/full/jOOMBeL',
-	},
-	{
-		// videoURL:
-		// 	'https://res.cloudinary.com/dadobos/video/upload/v1653827744/web/ProductLandingPage_fqwfjg',
-		imageURL:
-			'https://res.cloudinary.com/dadobos/image/upload/v1653827745/web/ProductLandingPage_hebmnn',
-		title: 'Product Landing Page',
-		description: '',
-		url: 'https://codepen.io/diaid/full/GRRrKLW',
-	},
-	{
-		// videoURL:
-		// 	'https://res.cloudinary.com/dadobos/video/upload/v1653827745/web/PersonalPortofolio_nibw6t',
-		imageURL:
-			'https://res.cloudinary.com/dadobos/image/upload/v1653827743/web/PersonalPortofolio_exblcg',
-		title: 'Personal Portofolio',
-		description: '',
-		url: 'https://codepen.io/diaid/full/YzzVgwK',
-	},
-];
-
-export const CSSData = [
+export const ReactData = [
 	{
 		imageURL:
-			'https://res.cloudinary.com/dadobos/image/upload/v1653843087/web/AnchorTagHideComponents_vie5jq.png',
-		title: 'Anchor Tag Hide Components',
+			'https://res.cloudinary.com/dadobos/image/upload/v1673023170/web/uxfuyzap5kbs1si34g29.png',
+		title: 'Online Shop',
 		description: '',
-		url: 'https://codepen.io/diaid/full/MWOOogX',
-	},
-	{
-		imageURL:
-			'https://res.cloudinary.com/dadobos/image/upload/v1653845210/web/RadioHideComponents_dvxpgw.png',
-		title: 'Radio Hide Components',
-		description: '',
-		url: 'https://codepen.io/diaid/full/qBVdgWW',
+		url: 'https://dadobos.github.io/online-shop/',
 	},
 ];
 
@@ -96,5 +41,36 @@ export const VueData = [
 		title: 'World Countries',
 		description: '',
 		url: 'https://dadobos.github.io/worldcountries/',
-	}
+	},
+];
+
+export const CSSData = [
+	{
+		imageURL:
+			'https://res.cloudinary.com/dadobos/image/upload/v1673027279/web/msvc649ua0gahqegu31o.png',
+		title: 'Anchor Tag Hide Components',
+		description: '',
+		url: 'https://codepen.io/diaid/full/MWOOogX',
+	},
+	{
+		imageURL:
+			'https://res.cloudinary.com/dadobos/image/upload/v1673027279/web/dprvsa15ocx3l34dxogo.png',
+		title: 'Radio Hide Components',
+		description: '',
+		url: 'https://codepen.io/diaid/full/qBVdgWW',
+	},
+	{
+		imageURL:
+			'https://res.cloudinary.com/dadobos/image/upload/v1673025125/web/anidcin5lbxo2hced5i4.png',
+		title: 'Rounded Paragraph',
+		description: '',
+		url: 'https://codepen.io/diaid/full/QWxOgVm',
+	},
+	{
+		imageURL:
+			'https://res.cloudinary.com/dadobos/image/upload/v1673027940/web/z9qn4wstdtzpr4cf5xtx.png',
+		title: 'Responsive Table',
+		description: '',
+		url: 'https://codepen.io/diaid/full/xxJRGMB',
+	},
 ];
diff --git a/src/layouts/main/components/header/navigation/Navigation.jsx b/src/layouts/main/components/header/navigation/Navigation.jsx
index 5238989..7e441d0 100644
--- a/src/layouts/main/components/header/navigation/Navigation.jsx
+++ b/src/layouts/main/components/header/navigation/Navigation.jsx
@@ -55,13 +55,13 @@ const Navigation = () => {
 				activeIndex: 1,
 			},
 			{
-				name: 'Games',
-				link: '/games',
+				name: 'Best Practices',
+				link: '/best-practices',
 				activeIndex: 2,
 			},
 			{
-				name: 'Best Practices',
-				link: '/best-practices',
+				name: 'Blog',
+				link: '/blog',
 				activeIndex: 3,
 			},
 			{
diff --git a/src/pages/blog/Blog.jsx b/src/pages/blog/Blog.jsx
new file mode 100644
index 0000000..fbb319f
--- /dev/null
+++ b/src/pages/blog/Blog.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Blog = () => {
+	return (
+		<div style={{ minHeight: 'calc(100vh-128px)' }}>Blog ...in progress</div>
+	);
+};
+
+export default Blog;
diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js
new file mode 100644
index 0000000..2cb34c7
--- /dev/null
+++ b/src/pages/blog/index.js
@@ -0,0 +1 @@
+export {default} from './Blog'
\ No newline at end of file
diff --git a/src/pages/games/Games.jsx b/src/pages/games/Games.jsx
deleted file mode 100644
index 14b1037..0000000
--- a/src/pages/games/Games.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-const Games = () => {
-	return (
-		<div style={{ minHeight: 'calc(100vh-128px)' }}>Games ...in progress</div>
-	);
-};
-
-export default Games;
diff --git a/src/pages/games/index.js b/src/pages/games/index.js
deleted file mode 100644
index 99a9f51..0000000
--- a/src/pages/games/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export {default} from './Games'
\ No newline at end of file
diff --git a/src/pages/landing/Landing.jsx b/src/pages/landing/Landing.jsx
index a992097..cf113bf 100644
--- a/src/pages/landing/Landing.jsx
+++ b/src/pages/landing/Landing.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Grid, Typography, Divider } from '@mui/material';
 import About from '../about';
-import Games from '../games';
+import Blog from '../blog';
 import BestPractices from '../best-practices';
 import Projects from '../projects';
 
@@ -17,15 +17,7 @@ const Home = () => {
 					<Projects />
 				</Grid>
 			</Grid>
-			<Grid item container direction='column'>
-				<Grid item>
-					<Typography variant='h3'>Games</Typography>
-					<Divider variant='inset' />
-				</Grid>
-				<Grid item>
-					<Games />
-				</Grid>
-			</Grid>
+
 			<Grid item container direction='column'>
 				<Grid item>
 					<Typography variant='h3'>Best Practices</Typography>
@@ -36,6 +28,16 @@ const Home = () => {
 				</Grid>
 			</Grid>
 
+			<Grid item container direction='column'>
+				<Grid item>
+					<Typography variant='h3'>Blog</Typography>
+					<Divider variant='inset' />
+				</Grid>
+				<Grid item>
+					<Blog />
+				</Grid>
+			</Grid>
+
 			<Grid item container justifyContent='flex-end'>
 				<Grid item>
 					<About />
diff --git a/src/pages/projects/Projects.jsx b/src/pages/projects/Projects.jsx
index 281feeb..5613870 100644
--- a/src/pages/projects/Projects.jsx
+++ b/src/pages/projects/Projects.jsx
@@ -1,14 +1,15 @@
 import React from 'react';
-import { FreeCodeCampData, JavaData, WebsitesData, VueData } from 'data/Data';
+import { ReactData, JavaData, WebsitesData, VueData } from 'data/Data';
 import MainAccordion from 'components/main-accordion/MainAccordion';
 
 const Projects = () => {
 	return (
 		<>
-			<MainAccordion items={FreeCodeCampData} title='Free Code Camp' />
-			<MainAccordion items={JavaData} title='Java' />
-			<MainAccordion items={WebsitesData} title='Websites' />
+			{/* <MainAccordion items={FreeCodeCampData} title='Free Code Camp' /> */}
+			<MainAccordion items={ReactData} title='React' />
 			<MainAccordion items={VueData} title='Vue' />
+			<MainAccordion items={WebsitesData} title='HTML' />
+			<MainAccordion items={JavaData} title='Java' />
 		</>
 	);
 };
diff --git a/src/routes/Routes.js b/src/routes/Routes.js
index 3618b44..bebcf0e 100644
--- a/src/routes/Routes.js
+++ b/src/routes/Routes.js
@@ -9,7 +9,7 @@ import LandingLayout from '../layouts/landing';
 const Home = lazy(() => import('../pages/landing'));
 const About = lazy(() => import('../pages/about'));
 const Projects = lazy(() => import('../pages/projects'));
-const Games = lazy(() => import('../pages/games'));
+const Blog = lazy(() => import('../pages/blog'));
 const BestPractices = lazy(() => import('../pages/best-practices'));
 
 export const CustomRoutes = () => {
@@ -45,10 +45,10 @@ export const CustomRoutes = () => {
 					/>
 
 					<Route
-						path='games'
+						path='blog'
 						element={
 							<MainLayout>
-								<Games />
+								<Blog />
 							</MainLayout>
 						}
 					/>