diff --git a/src/components/App.css b/src/components/App.css
index 358d661..d838cc6 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -9,7 +9,7 @@
 }
 
 html {
-	margin-top: 80px;
+	margin-top: 120px;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
diff --git a/src/components/pages/Practice/CustomPractice/customPractice-style.js b/src/components/pages/Practice/CustomPractice/customPractice-style.js
index fe1a7de..8b5dbf6 100644
--- a/src/components/pages/Practice/CustomPractice/customPractice-style.js
+++ b/src/components/pages/Practice/CustomPractice/customPractice-style.js
@@ -15,7 +15,6 @@ const TimerDivP = styled.p`
 const CustomPracticeDiv = styled.div`
 	min-height: 40vh;
 	width: 100%;
-	padding-left: 1rem;
 `;
 
 const ButtonsDiv = styled.div`
diff --git a/src/components/pages/Practice/CustomPractice/customPractice.js b/src/components/pages/Practice/CustomPractice/customPractice.js
index 3de8463..bfdef1c 100644
--- a/src/components/pages/Practice/CustomPractice/customPractice.js
+++ b/src/components/pages/Practice/CustomPractice/customPractice.js
@@ -117,35 +117,6 @@ export default function CustomPractice({
 					</IconButton>
 				</TimerDiv>
 			</TimerContainer>
-			{/* <PracticePageText>
-				How long would you like to practice?
-			</PracticePageText> */}
-			{/* <TimerDiv>
-				<IconButton
-					color="primary"
-					aria-label="remove one minute from timer"
-					component="span"
-					onClick={handleDecrement}
-				>
-					<RemoveIcon />
-				</IconButton>
-				<TextField
-					className={classes.timerInput}
-					id="outlined-basic"
-					label="minutes"
-					variant="outlined"
-					value={timer}
-					onChange={(event, value) => setTimer(value)}
-				/>
-				<IconButton
-					color="primary"
-					aria-label="add one minut to timer"
-					component="span"
-					onClick={handleIncrement}
-				>
-					<AddIcon />
-				</IconButton>
-			</TimerDiv> */}
 
 			<PracticePageText>
 				Which decks would you like to practice?
diff --git a/src/components/pages/Practice/FinishPractice/finishedPractice.js b/src/components/pages/Practice/FinishPractice/finishedPractice.js
index ed6c483..4b46d98 100644
--- a/src/components/pages/Practice/FinishPractice/finishedPractice.js
+++ b/src/components/pages/Practice/FinishPractice/finishedPractice.js
@@ -4,6 +4,7 @@ import Confetti from 'react-confetti';
 import styled from 'styled-components';
 import Button from '@material-ui/core/Button';
 import PropTypes from 'prop-types';
+import useYourDecks from '../../../../hooks/useYourDecks';
 
 const FinishPracticeWrapper = styled.div`
 	height: 100vh;
@@ -18,8 +19,14 @@ const TextDiv = styled.div`
 	margin: 10rem;
 `;
 
-export default function FinishPractice({ setPracticeStage }) {
+export default function FinishPractice({
+	setPracticeStage,
+	setSelectedDecks,
+	setDecks,
+}) {
 	const { width, height } = useWindowSize();
+
+	useYourDecks({ setDecks, setSelectedDecks });
 	return (
 		<FinishPracticeWrapper>
 			<Confetti width={width} height={height} />
@@ -27,7 +34,9 @@ export default function FinishPractice({ setPracticeStage }) {
 			<Button
 				variant="contained"
 				color="primary"
-				onClick={() => setPracticeStage('customPractice')}
+				onClick={() => {
+					setPracticeStage('customPractice');
+				}}
 			>
 				Practice
 			</Button>
@@ -37,4 +46,6 @@ export default function FinishPractice({ setPracticeStage }) {
 
 FinishPractice.propTypes = {
 	setPracticeStage: PropTypes.func.isRequired,
+	setSelectedDecks: PropTypes.func.isRequired,
+	setDecks: PropTypes.func.isRequired,
 };
diff --git a/src/components/pages/Practice/practice.js b/src/components/pages/Practice/practice.js
index 6238230..96f83cb 100644
--- a/src/components/pages/Practice/practice.js
+++ b/src/components/pages/Practice/practice.js
@@ -37,6 +37,12 @@ export default function Practice() {
 	}
 
 	if (practiceStage === 'finishedPractice') {
-		return <FinishPractice setPracticeStage={setPracticeStage} />;
+		return (
+			<FinishPractice
+				setPracticeStage={setPracticeStage}
+				setDecks={setDecks}
+				setSelectedDecks={setSelectedDecks}
+			/>
+		);
 	}
 }
diff --git a/src/components/pages/YourDecks/children/CreateDeckForm.js b/src/components/pages/YourDecks/children/CreateDeckForm.js
index 7d14f5c..5b373b6 100644
--- a/src/components/pages/YourDecks/children/CreateDeckForm.js
+++ b/src/components/pages/YourDecks/children/CreateDeckForm.js
@@ -2,22 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
-import { makeStyles } from '@material-ui/core/styles';
+import { Typography } from '@material-ui/core';
 import fetchData from '../../../../utils/fetchData/fetchData';
+import { useStyles, FormButtonsDiv, NewDeckForm } from './Deck-style';
 
 export default function CreateDeckForm({ setDeckCreate }) {
-	const useStyles = makeStyles((theme) => ({
-		root: {
-			'& > *': {
-				margin: theme.spacing(1),
-				width: '25ch',
-			},
-		},
-		card: {}, // can style card also
-		button: {}, // need to style buttons
-	}));
 	const classes = useStyles();
 
 	const cancelHandler = (event) => {
@@ -47,19 +39,20 @@ export default function CreateDeckForm({ setDeckCreate }) {
 			}); // how to test error handling and also need to handle errors better here.
 	};
 
+	const cardClasses = `${classes.root} ${classes.newDeckForm}`;
+
 	return (
-		<Card
-			style={{ backgroundColor: 'rgb(252,193,6)' }}
-			className={classes.card}
-		>
+		<Card className={cardClasses}>
+			<CardMedia
+				component="img"
+				alt="Form to add new deck of cards"
+				height="90"
+				image="https://www.pngitem.com/pimgs/m/25-254660_transparent-flashcards-clipart-flashcard-png-png-download.png"
+				title="Add new deck"
+			/>
 			<CardContent>
-				{/* do we need label for the form in material UI? */}
-				<form
-					id="createDeckForm"
-					className={classes.root}
-					noValidate
-					autoComplete="off"
-				>
+				<NewDeckForm id="createDeckForm" noValidate autoComplete="off">
+					<Typography>Create a new deck</Typography>
 					<TextField
 						variant="outlined"
 						margin="normal"
@@ -71,29 +64,74 @@ export default function CreateDeckForm({ setDeckCreate }) {
 						// autoComplete="deckName"
 						// autoFocus
 					/>
-					<Button
-						type="submit"
-						fullWidth
-						variant="contained"
-						color="primary"
-						className={classes.button}
-						onClick={doneHandler}
-					>
-						Done
-					</Button>
-					<Button
-						type="submit"
-						fullWidth
-						variant="contained"
-						color="primary"
-						className={classes.button}
-						onClick={cancelHandler}
-					>
-						Cancel
-					</Button>
-				</form>
+					<FormButtonsDiv>
+						<Button
+							type="submit"
+							variant="contained"
+							color="primary"
+							onClick={doneHandler}
+						>
+							Save
+						</Button>
+						<Button
+							type="submit"
+							variant="contained"
+							color="primary"
+							onClick={cancelHandler}
+						>
+							Cancel
+						</Button>
+					</FormButtonsDiv>
+				</NewDeckForm>
 			</CardContent>
 		</Card>
+
+		// <Card
+		// 	style={{ backgroundColor: 'rgb(252,193,6)' }}
+		// 	className={classes.card}
+		// >
+		// 	<CardContent>
+		// 		{/* do we need label for the form in material UI? */}
+		// 		<form
+		// 			id="createDeckForm"
+		// 			className={classes.root}
+		// 			noValidate
+		// 			autoComplete="off"
+		// 		>
+		// 			<TextField
+		// 				variant="outlined"
+		// 				margin="normal"
+		// 				required
+		// 				fullWidth
+		// 				id="deckName"
+		// 				label="New Deck Name"
+		// 				name="deckName"
+		// 				// autoComplete="deckName"
+		// 				// autoFocus
+		// 			/>
+		// 			<Button
+		// 				type="submit"
+		// 				fullWidth
+		// 				variant="contained"
+		// 				color="primary"
+		// 				className={classes.button}
+		// 				onClick={doneHandler}
+		// 			>
+		// 				Done
+		// 			</Button>
+		// 			<Button
+		// 				type="submit"
+		// 				fullWidth
+		// 				variant="contained"
+		// 				color="primary"
+		// 				className={classes.button}
+		// 				onClick={cancelHandler}
+		// 			>
+		// 				Cancel
+		// 			</Button>
+		// 		</form>
+		// 	</CardContent>
+		// </Card>
 	);
 }
 
diff --git a/src/components/pages/YourDecks/children/Deck-style.js b/src/components/pages/YourDecks/children/Deck-style.js
index 66a8606..01324b4 100644
--- a/src/components/pages/YourDecks/children/Deck-style.js
+++ b/src/components/pages/YourDecks/children/Deck-style.js
@@ -5,16 +5,37 @@ const ViewDecksDiv = styled.div`
 	height: 100%;
 	width: 100%;
 	max-width: 320px;
-	max-height: 400px;
+
 	display: flex;
 	flex-wrap: wrap;
 	cursor: pointer;
 	overflow-x: auto;
+	position: relative;
+`;
+
+const FormButtonsDiv = styled.div`
+	display: flex;
+	width: 100%;
+	justify-content: space-between;
+`;
+
+const NewDeckForm = styled.form`
+	width: 100%;
 `;
 
 const useStyles = makeStyles({
 	root: {
-		width: 150,
+		'width': 140,
+		'margin': '0.25rem',
+		'&:hover': {
+			background: 'rgb(252,193,6)',
+		},
+	},
+	newDeckForm: {
+		position: 'fixed',
+		width: '320px',
+		height: '300px',
+		top: '200px',
 	},
 	bullet: {
 		display: 'inline-block',
@@ -27,15 +48,10 @@ const useStyles = makeStyles({
 	pos: {
 		marginBottom: 12,
 	},
-	card: {
-		width: '120px',
-		height: '75px',
-		margin: '1rem',
-	},
 	button: {
 		'padding': '20px',
 		'font-size': '60rem',
 	},
 });
 
-export { ViewDecksDiv, useStyles };
+export { ViewDecksDiv, useStyles, FormButtonsDiv, NewDeckForm };
diff --git a/src/components/pages/YourDecks/children/clickableDeck.js b/src/components/pages/YourDecks/children/clickableDeck.js
index 08d77cd..52412d6 100644
--- a/src/components/pages/YourDecks/children/clickableDeck.js
+++ b/src/components/pages/YourDecks/children/clickableDeck.js
@@ -3,21 +3,29 @@ import PropTypes from 'prop-types';
 import Card from '@material-ui/core/Card';
 import Typography from '@material-ui/core/Typography';
 import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
 import { useHistory } from 'react-router-dom';
 import { useStyles } from './Deck-style';
 
 export default function ClickableDeck({ deck, setViewingDeck }) {
 	const classes = useStyles();
 	const history = useHistory();
+
+	const cardClasses = `${classes.root} ${classes.card}`;
+
 	return (
-		<Card
-			style={{ backgroundColor: 'rgb(252,193,6)' }}
-			className={classes.card}
-			onClick={() => {
-				setViewingDeck(deck.deck_id);
-				history.push('/cards-in-deck');
-			}}
-		>
+		<Card className={cardClasses}>
+			<CardMedia
+				component="img"
+				alt="Clickable deck of flashcards"
+				height="90"
+				image="https://www.pngitem.com/pimgs/m/25-254660_transparent-flashcards-clipart-flashcard-png-png-download.png"
+				title="Clickable deck of flashcards"
+				onClick={() => {
+					setViewingDeck(deck.deck_id);
+					history.push('/cards-in-deck');
+				}}
+			/>
 			<CardContent>
 				<Typography>{deck.deck_name}</Typography>
 			</CardContent>
diff --git a/src/components/pages/YourDecks/yourDecks.js b/src/components/pages/YourDecks/yourDecks.js
index 1a8cb45..b9d8bf6 100644
--- a/src/components/pages/YourDecks/yourDecks.js
+++ b/src/components/pages/YourDecks/yourDecks.js
@@ -28,7 +28,7 @@ export default function MyDecks({ setViewingDeck }) {
 			{deckCreate && <CreateDeckForm setDeckCreate={setDeckCreate} />}
 			<ButtonsDiv>
 				<Button
-					type="submit"
+					// type="submit"
 					fullWidth
 					variant="contained"
 					color="primary"
@@ -39,7 +39,7 @@ export default function MyDecks({ setViewingDeck }) {
 				</Button>
 
 				<Button
-					type="submit"
+					// type="submit"
 					fullWidth
 					variant="contained"
 					color="primary"
diff --git a/src/components/viewDecks/selectableDeck.js b/src/components/viewDecks/selectableDeck.js
new file mode 100644
index 0000000..342deb4
--- /dev/null
+++ b/src/components/viewDecks/selectableDeck.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+import Card from '@material-ui/core/Card';
+import CardMedia from '@material-ui/core/CardMedia';
+import Typography from '@material-ui/core/Typography';
+import CardContent from '@material-ui/core/CardContent';
+import { useStyles } from './viewDeck-style';
+
+export default function SelectableDeck({
+	deck,
+	selectedDecks,
+	setSelectedDecks,
+}) {
+	const [checkbox, setCheckbox] = React.useState(false);
+
+	const checkCard = () => {
+		const newSelectedDates = {
+			...selectedDecks,
+			[deck.deck_id]: !selectedDecks[deck.deck_id],
+		};
+		setCheckbox(!checkbox);
+		setSelectedDecks(newSelectedDates);
+	};
+
+	const classes = useStyles();
+
+	const cardClasses = `${classes.root} ${classes.card} ${
+		checkbox && classes.checked
+	}`;
+	return (
+		<FormControlLabel
+			className={classes.checkboxParent}
+			control={
+				<Checkbox
+					className={classes.checkboxClass}
+					checked={selectedDecks[deck.deck_id] || false}
+					onClick={checkCard}
+					color="primary"
+				/>
+			}
+			label={
+				<Card className={cardClasses}>
+					<CardMedia
+						component="img"
+						alt="Contemplative Reptile"
+						height="90"
+						image="https://www.pngitem.com/pimgs/m/25-254660_transparent-flashcards-clipart-flashcard-png-png-download.png"
+						title="Contemplative Reptile"
+					/>
+					<CardContent>
+						<Typography>{deck.deck_name}</Typography>
+					</CardContent>
+				</Card>
+			}
+		/>
+	);
+}
+
+SelectableDeck.propTypes = {
+	deck: PropTypes.objectOf(PropTypes.string).isRequired,
+	selectedDecks: PropTypes.arrayOf(PropTypes.object).isRequired,
+	setSelectedDecks: PropTypes.func.isRequired,
+};
diff --git a/src/components/viewDecks/viewDeck-style.js b/src/components/viewDecks/viewDeck-style.js
index 9d8f886..6af86f7 100644
--- a/src/components/viewDecks/viewDeck-style.js
+++ b/src/components/viewDecks/viewDeck-style.js
@@ -29,29 +29,19 @@ const useStyles = makeStyles(() => ({
 	},
 	checkboxClass: {
 		padding: 0,
-		// paddingRight: '0.2rem',
-		// position: 'absolute',
-		// bottom: '-10px',
-		// left: '-12px',
-		// [theme.breakpoints.up('md')]: {
-		// 	bottom: '0px',
-		// 	left: '-12px',
-		// },
-	},
-	card: {
-		width: '110px',
-		height: '75px',
-		marginTop: '1rem',
-		marginLeft: '0rem',
+		// visibility: 'hidden',
+		position: 'absolute',
 	},
+
 	checked: {
-		opacity: '0.8',
-		// width: '118px',
-		// height: '73px',
+		// backgroundColor: 'rgb(252,193,6)',
+		// // height: '73px',
 		// border: '1px solid rgb(64,84,181)',
 	},
 	checkboxParent: {
-		marginLeft: '0px',
+		margin: 0,
+		marginTop: '0.5rem',
+		position: 'relative',
 	},
 }));
 
diff --git a/src/components/viewDecks/viewDecks.js b/src/components/viewDecks/viewDecks.js
index 2411411..fa54f0b 100644
--- a/src/components/viewDecks/viewDecks.js
+++ b/src/components/viewDecks/viewDecks.js
@@ -1,11 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-import Card from '@material-ui/core/Card';
-import Typography from '@material-ui/core/Typography';
-import CardContent from '@material-ui/core/CardContent';
-import { ViewDecksDiv, useStyles } from './viewDeck-style';
+import SelectableDeck from './selectableDeck';
+import { ViewDecksDiv } from './viewDeck-style';
 
 export default function ViewDecks({ selectedDecks, setSelectedDecks, decks }) {
 	return (
@@ -27,56 +23,8 @@ export default function ViewDecks({ selectedDecks, setSelectedDecks, decks }) {
 	);
 }
 
-function SelectableDeck({ deck, selectedDecks, setSelectedDecks }) {
-	const [checkbox, setCheckbox] = React.useState(false);
-
-	const checkCard = () => {
-		const newSelectedDates = {
-			...selectedDecks,
-			[deck.deck_id]: !selectedDecks[deck.deck_id],
-		};
-		setCheckbox(!checkbox);
-		setSelectedDecks(newSelectedDates);
-	};
-
-	const classes = useStyles();
-
-	const cardClasses = `${classes.card} ${checkbox && classes.checked}`;
-	return (
-		<FormControlLabel
-			className={classes.checkboxParent}
-			control={
-				<Checkbox
-					className={classes.checkboxClass}
-					checked={selectedDecks[deck.deck_id] || false}
-					onClick={checkCard}
-					color="primary"
-				/>
-			}
-			label={
-				<Card
-					className={cardClasses}
-					style={{
-						backgroundColor: 'rgb(244,211,66)',
-					}}
-				>
-					<CardContent>
-						<Typography>{deck.deck_name}</Typography>
-					</CardContent>
-				</Card>
-			}
-		/>
-	);
-}
-
 ViewDecks.propTypes = {
 	selectedDecks: PropTypes.arrayOf(PropTypes.object).isRequired,
 	setSelectedDecks: PropTypes.func.isRequired,
 	decks: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
-
-SelectableDeck.propTypes = {
-	deck: PropTypes.objectOf(PropTypes.string).isRequired,
-	selectedDecks: PropTypes.arrayOf(PropTypes.object).isRequired,
-	setSelectedDecks: PropTypes.func.isRequired,
-};
diff --git a/src/img/deckIcon.png b/src/img/deckIcon.png
new file mode 100644
index 0000000..819f5fb
Binary files /dev/null and b/src/img/deckIcon.png differ