diff --git a/public/images/logo.gif b/public/images/logo.gif
new file mode 100644
index 0000000..fb482ff
Binary files /dev/null and b/public/images/logo.gif differ
diff --git a/public/images/logo.png b/public/images/logo.png
new file mode 100644
index 0000000..30207cb
Binary files /dev/null and b/public/images/logo.png differ
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 9123166..141c90f 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -5,6 +5,7 @@ import AuthenticationContext from './AuthenticationContext';
 
 export default function Home() {
 	const { user, isLoggedIn } = useContext(AuthenticationContext);
+
 	return (
 		<div
 			style={{
@@ -40,10 +41,14 @@ export default function Home() {
 						<br />
 						<div className="text-center">
 							<img
+								id="logo"
 								alt="Carpool App"
+								onMouseOver={(e) => (e.currentTarget.src = 'images/logo.gif')}
+								onMouseOut={(e) => (e.currentTarget.src = 'images/logo.png')}
 								className="text-center img-fluid"
 								src="images/logo.png"
-								width="350px"
+								width="500px"
+								height="750px"
 							/>
 						</div>
 						<br />