diff --git a/src/components/main-accordion/MainAccordion.jsx b/src/components/main-accordion/MainAccordion.jsx
new file mode 100644
index 0000000..8ba0263
--- /dev/null
+++ b/src/components/main-accordion/MainAccordion.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import {
+	Grid,
+	Accordion,
+	AccordionSummary,
+	AccordionDetails,
+	Typography,
+} from '@mui/material';
+import MainCard from 'components/main-card/MainCard';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+const MainAccordion = ({items, title}) => {
+	return (
+		<Accordion
+			defaultExpanded
+			TransitionProps={{ unmountOnExit: true }}
+			sx={{ background: 'transparent' }}>
+			<AccordionSummary
+				expandIcon={<ExpandMoreIcon />}
+				aria-controls='panel1a-content'
+				id='panel1a-header'>
+				<Typography variant='h5'>{ title }</Typography>
+			</AccordionSummary>
+			<AccordionDetails>
+				<Grid
+					container
+					direction='row'
+					alignItems='flex-start'
+					justifyContent='baseline'
+					spacing={3}>
+					{items.map((project) => (
+						<Grid
+							item
+							xs={12}
+							sm={6}
+							md={4}
+							key={project.title}
+							sx={{ alignItems: 'center', justifyContent: 'center' }}>
+							<MainCard
+								imageURL={project.imageURL}
+								title={project.title}
+								description={project.description}
+							/>
+						</Grid>
+					))}
+				</Grid>
+			</AccordionDetails>
+		</Accordion>
+	);
+};
+
+export default MainAccordion;
diff --git a/src/components/main-card/MainCard.jsx b/src/components/main-card/MainCard.jsx
index 51d6c37..758a616 100644
--- a/src/components/main-card/MainCard.jsx
+++ b/src/components/main-card/MainCard.jsx
@@ -1,15 +1,16 @@
 import React from 'react';
-import Card from '@mui/material/Card';
 import {
+	Card,
 	CardContent,
 	CardMedia,
 	CardActionArea,
 	Typography,
 } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import { VioletColorWheel, SeaGreenCrayola } from 'themes/Theme';
 
-const MainCard = ({ imageURL, title, description }) => {
+import { useTheme } from '@mui/material/styles';
+import { VioletColorWheel, SeaGreenCrayola } from 'themes/Colors';
+
+const MainCard = ({  imageURL, title, description, url }) => {
 	const theme = useTheme();
 	const shadowColor =
 		theme.palette.mode === 'dark' ? SeaGreenCrayola : VioletColorWheel;
@@ -27,12 +28,14 @@ const MainCard = ({ imageURL, title, description }) => {
 				},
 			}}>
 			<CardActionArea>
-				<CardMedia component='img' height='180' image={imageURL} alt={title} />
+			<CardMedia component='img' height='150' image={imageURL} alt={title} />
 				<CardContent color='white'>
 					<Typography gutterBottom variant='h6' component='div'>
 						{title}
 					</Typography>
-					{/* <Typography variant='body2'>{description}</Typography> */}
+					{{ description } !== '' && (
+						<Typography variant='body2'>{description}</Typography>
+					)}
 				</CardContent>
 			</CardActionArea>
 		</Card>
diff --git a/src/data/Data.jsx b/src/data/Data.jsx
index 63df09d..b45cfba 100644
--- a/src/data/Data.jsx
+++ b/src/data/Data.jsx
@@ -1,60 +1,91 @@
-const ProjectData = [
+export const FreeCodeCampData = [
 	{
+		videoURL:
+			'https://res.cloudinary.com/dadobos/video/upload/v1653827756/web/TechnicalDocumentationPage_h03qkv',
 		imageURL:
-			'https://res.cloudinary.com/dadobos/image/upload/v1642766522/web/Technical_Documentation_Page_v8ez8t.png',
+			'https://res.cloudinary.com/dadobos/image/upload/v1653827744/web/TechnicalDocumentationPage_pbudut',
 		title: 'Technical Documentation',
-		description: '0',
-		url: '',
+		description: '',
+		url: 'https://codepen.io/diaid/pen/PoopdWd',
 	},
 	{
+		videoURL:
+			'https://res.cloudinary.com/dadobos/video/upload/v1653827749/web/TributePage_iarfpr',
 		imageURL:
-			'https://res.cloudinary.com/dadobos/image/upload/v1642766522/web/Tribute_Page_xftlcx.png',
+			'https://res.cloudinary.com/dadobos/image/upload/v1653827749/web/TributePage_hpxmr6',
 		title: 'Tribut Page',
-		description: '0',
-		url: '',
+		description: '',
+		url: 'https://codepen.io/diaid/pen/MWWeorj',
 	},
 	{
+		videoURL:
+			'https://res.cloudinary.com/dadobos/video/upload/v1653827744/web/SurveyForm_g0ornr',
 		imageURL:
-			'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Survey_Form_de2ebp.png',
+			'https://res.cloudinary.com/dadobos/image/upload/v1653827742/web/SurveyForm_upho4b',
 		title: 'Survey Form',
-		description: '0',
-		url: '',
+		description: '',
+		url: 'https://codepen.io/diaid/pen/jOOMBeL',
 	},
 	{
+		videoURL:
+			'https://res.cloudinary.com/dadobos/video/upload/v1653827744/web/ProductLandingPage_fqwfjg',
 		imageURL:
-			'https://res.cloudinary.com/dadobos/image/upload/v1642766520/web/Product_Landing_Page_x6v5qg.png',
+			'https://res.cloudinary.com/dadobos/image/upload/v1653827745/web/ProductLandingPage_hebmnn',
 		title: 'Product Landing Page',
-		description: '0',
-		url: '',
+		description: '',
+		url: 'https://codepen.io/diaid/pen/GRRrKLW',
 	},
 	{
+		videoURL:
+			'https://res.cloudinary.com/dadobos/video/upload/v1653827745/web/PersonalPortofolio_nibw6t',
 		imageURL:
-			'https://res.cloudinary.com/dadobos/image/upload/v1642766520/web/Personal_Portofolio_x9evp9.png',
+			'https://res.cloudinary.com/dadobos/image/upload/v1653827743/web/PersonalPortofolio_exblcg',
 		title: 'Personal Portofolio',
-		description: '0',
-		url: '',
+		description: '',
+		url: 'https://codepen.io/diaid/pen/YzzVgwK',
+	},
+];
+
+export const CSSData = [
+	{
+		imageURL:
+			'https://res.cloudinary.com/dadobos/image/upload/v1653843087/web/AnchorTagHideComponents_vie5jq.png',
+		title: 'Anchor Tag Hide Components',
+		description: '',
+		url: 'https://codepen.io/diaid/full/MWOOogX',
 	},
 	{
 		imageURL:
-			'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Square_orlybg.png',
-		title: 'Square',
-		description: '0',
-		url: '',
+			'https://res.cloudinary.com/dadobos/image/upload/v1653845210/web/RadioHideComponents_dvxpgw.png',
+		title: 'Radio Hide Components',
+		description: '',
+		url: 'https://codepen.io/diaid/full/qBVdgWW',
 	},
+];
+
+export const WebsitesData = [
+	{
+		imageURL:
+			'https://res.cloudinary.com/dadobos/image/upload/v1653850879/web/TheSquareProject_sgflcj.png',
+		title: 'The Square Project',
+		description: '',
+		url: 'https://dadobos.github.io/The-Square-Project/',
+	},
+];
+
+export const JavaData = [
 	{
 		imageURL:
 			'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Restaurant_Billing_System_rgpsif.png',
 		title: 'Restaurant Billing System',
-		description: '0',
-		url: '',
+		description: '',
+		url: 'https://github.com/dadobos/Restaurant',
 	},
 	{
 		imageURL:
 			'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Billing_System_bazap1.png',
 		title: 'Billing System',
-		description: '0',
-		url: '',
+		description: '',
+		url: 'https://github.com/dadobos/Billing-System',
 	},
 ];
-
-export default ProjectData
\ No newline at end of file
diff --git a/src/data/index.js b/src/data/index.js
deleted file mode 100644
index 25bac88..0000000
--- a/src/data/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ProjectData } from './Data';
diff --git a/src/layouts/landing/components/header/Header.jsx b/src/layouts/landing/components/header/Header.jsx
index 5eac068..8280853 100644
--- a/src/layouts/landing/components/header/Header.jsx
+++ b/src/layouts/landing/components/header/Header.jsx
@@ -54,7 +54,7 @@ const Header = () => {
 										variant='h5'
 										sx={{
 											textTransform: 'uppercase',
-											letterSpacing: '.3rem',
+											letterSpacing: '.2rem',
 										}}>
 										Dan Dobos
 									</Typography>
diff --git a/src/pages/best-practices/BestPractices.jsx b/src/pages/best-practices/BestPractices.jsx
index 8ff1245..0a75e39 100644
--- a/src/pages/best-practices/BestPractices.jsx
+++ b/src/pages/best-practices/BestPractices.jsx
@@ -1,8 +1,12 @@
 import React from 'react';
+import { CSSData } from 'data/Data';
+import MainAccordion from 'components/main-accordion/MainAccordion';
 
 const BestPractices = () => {
 	return (
-		<div sx={{ minHeight: 'calc(100vh-128px)' }}>Best Practices ...in progress</div>
+		<>
+			<MainAccordion items={CSSData} title='CSS Only' />
+		</>
 	);
 };
 
diff --git a/src/pages/projects/Projects.jsx b/src/pages/projects/Projects.jsx
index e0bb83f..9969a87 100644
--- a/src/pages/projects/Projects.jsx
+++ b/src/pages/projects/Projects.jsx
@@ -1,33 +1,14 @@
 import React from 'react';
-import { Grid } from '@mui/material';
-import ProjectData from 'data/Data';
-import MainCard from 'components/main-card/MainCard';
+import { FreeCodeCampData, JavaData, WebsitesData } from 'data/Data';
+import MainAccordion from 'components/main-accordion/MainAccordion';
 
 const Projects = () => {
 	return (
-		<Grid
-			container
-			direction='row'
-			alignItems='flex-start'
-			justifyContent='baseline'
-			spacing={4}
-			sx={{ my: 1 }}>
-			{ProjectData.map((project) => (
-				<Grid
-					item
-					xs={12}
-					sm={6}
-					md={4}
-					key={project.title}
-					sx={{ alignItems: 'center', justifyContent: 'center' }}>
-					<MainCard
-						imageURL={project.imageURL}
-						title={project.title}
-						description={project.description}
-					/>
-				</Grid>
-			))}
-		</Grid>
+		<>
+			<MainAccordion items={FreeCodeCampData} title='Free Code Camp' />
+			<MainAccordion items={JavaData} title='Java' />
+			<MainAccordion items={WebsitesData} title='Websites' />
+		</>
 	);
 };
 
diff --git a/src/themes/Colors.js b/src/themes/Colors.js
new file mode 100644
index 0000000..57a95cd
--- /dev/null
+++ b/src/themes/Colors.js
@@ -0,0 +1,54 @@
+export const AcidGreen = '#BDBF09';
+export const AntiqueFuchsia = '#875C74';
+export const Black = '#000000';
+export const BlueGreen = '#004d40';
+export const BrandyPunch = '#ce8f28';
+export const BrownSugar = '#B4654A';
+export const Cadet = '#5A7881';
+export const Capri = '#5CC8FF';
+export const Celeste = '#CDFFF9';
+export const Cerise = '#D1345B';
+export const Charcoal = '#37474f';
+export const ChartreuseTraditional = '#E4FF1A';
+export const Citron = '#9EA93F';
+export const Cultured = '#eceff1';
+export const DarkOrange = '#FF8811';
+export const DarkPurple = '#0F0326';
+export const DeepSpaceSparkle = '#335C67';
+export const Eggplant = '#75485E';
+export const EnglishVermillion = '#D64045';
+export const Flame = '#cf5c36';
+export const FruitSalad = '#509f60';
+export const GrannySmithApple = '#ADF6B1';
+export const Grullo = '#A69888';
+export const IlluminatingEmerald = '#3E9276';
+export const ImperialRed = '#EF233C';
+export const InternationalGoldenGateBridge = '#BB4430';
+export const Magnolia = '#F3EFF5';
+export const MaizeCrayola = '#E8C547';
+export const Mango = '#F7B801';
+export const MangoTango = '#F5853F';
+export const MaximumBlue = '#42BFDD';
+export const MiddleRedPurple = '#AF5D63';
+export const OuterSpaceCrayola = '#22363C';
+export const PersianGreen = '#009688';
+export const Platinum = '#E5E5E5';
+export const Pomegranate = '#f44336';
+export const RedRYB = '#FF220C';
+export const Rosewood = '#5E0B15';
+export const Ruby = '#D81E5B';
+export const RubyRed = '#A31621';
+export const RussianGreen = '#678D58';
+export const Safron = '#EAC435';
+export const SeaGreenCrayola = '#0FFFC1';
+export const SlimyGreen = '#2B9720';
+export const SpanishGreen = '#058E3F';
+export const Spectra = '#315460';
+export const TeaGreen = '#CAE7B9';
+export const TucanRed = '#754043';
+export const TumbleWeed = '#CEA07E';
+export const TwilightLavander = '#754668';
+export const UARed = '#E01A4F';
+export const VioletColorWheel = '#7E0FFF';
+export const White = '#ffffff';
+export const WildBlueYonder = '#99B2DD';
diff --git a/src/themes/Theme.js b/src/themes/Theme.js
index 5cde49f..e5735da 100644
--- a/src/themes/Theme.js
+++ b/src/themes/Theme.js
@@ -1,40 +1,17 @@
 import { createTheme, responsiveFontSizes } from '@mui/material/styles';
 
 import overrides from './overrides';
-
-export const Black = '#000000';
-export const BlueGreen = '#004d40';
-export const BrandyPunch = '#ce8f28';
-export const Cadet = '#5A7881';
-export const Celeste = '#CDFFF9';
-export const Charcoal = '#37474f';
-export const ChartreuseTraditional = '#E4FF1A';
-export const Cultured = '#eceff1';
-export const DeepSpaceSparkle = '#335C67';
-export const AntiqueFuchsia = '#875C74';
-export const Eggplant = '#75485E';
-export const FruitSalad = '#509f60';
-export const GrannySmithApple = '#ADF6B1';
-export const IlluminatingEmerald = '#3E9276';
-export const PersianGreen = '#009688';
-export const RussianGreen = '#7B8E64';
-export const InternationalGoldenGateBridge = '#BB4430';
-export const MangoTango = '#F5853F';
-export const MiddleRedPurple = '#AF5D63';
-export const OuterSpaceCrayola = '#22363C';
-export const Platinum = '#E5E5E5';
-export const Pomegranate = '#f44336';
-export const Rosewood = '#5E0B15';
-export const Ruby = '#D81E5B';
-export const Spectra = '#315460';
-export const TeaGreen = '#CAE7B9';
-export const TucanRed = '#754043';
-export const TumbleWeed = '#CEA07E';
-export const TwilightLavander = '#754668';
-export const UARed = '#E01A4F';
-export const White = '#ffffff';
-export const VioletColorWheel = '#7E0FFF';
-export const SeaGreenCrayola = '#0FFFC1';
+import {
+	DeepSpaceSparkle,
+	White,
+	Cadet,
+	Black,
+	GrannySmithApple,
+	UARed,
+	OuterSpaceCrayola,
+	SeaGreenCrayola,
+	VioletColorWheel,
+} from './Colors';
 
 // Main layout
 export const MainTheme = (mode) => ({
@@ -43,8 +20,14 @@ export const MainTheme = (mode) => ({
 		...(mode === 'light'
 			? {
 					// palette values for light mode
-					primary: { main: DeepSpaceSparkle, contrastText: White },
-					secondary: { main: Cadet, contrastText: White },
+					primary: {
+						main: DeepSpaceSparkle,
+						contrastText: White,
+					},
+					secondary: {
+						main: Cadet,
+						contrastText: White,
+					},
 					divider: DeepSpaceSparkle,
 					background: {
 						default: White,
@@ -75,8 +58,8 @@ export const MainTheme = (mode) => ({
 						secondary: White,
 					},
 			  }),
-		lightAccent: { main: MangoTango },
-		darkAccent: { main: PersianGreen },
+		lightAccent: { main: VioletColorWheel },
+		darkAccent: { main: SeaGreenCrayola },
 		contrastThreshold: 3,
 		tonalOffset: 0.2,
 	},