diff --git a/src/assets/screenshot-my-chore-dark.png b/src/assets/screenshot-my-chore-dark.png
new file mode 100644
index 0000000..a92c87c
Binary files /dev/null and b/src/assets/screenshot-my-chore-dark.png differ
diff --git a/src/assets/screenshot-my-chore.png b/src/assets/screenshot-my-chore.png
index 62880cb..498d72a 100644
Binary files a/src/assets/screenshot-my-chore.png and b/src/assets/screenshot-my-chore.png differ
diff --git a/src/views/Landing/HomeHero.jsx b/src/views/Landing/HomeHero.jsx
index 648d289..0d2a2e8 100644
--- a/src/views/Landing/HomeHero.jsx
+++ b/src/views/Landing/HomeHero.jsx
@@ -171,14 +171,21 @@ const HomeHero = () => {
             <img
               src={mode === 'dark' ? screenShotMyChoreDark : screenShotMyChore}
               width={'100%'}
-              style={{
-                maxWidth: 300,
-              }}
               height={'auto'}
               alt='Hero img'
               data-aos-delay={100 * 2}
               data-aos-anchor='[data-aos-id-hero]'
               data-aos='fade-left'
+              style={{
+                width: '100%',
+                maxWidth: 300,
+              }}
+              onMouseEnter={e => {
+                e.target.style.transform = 'rotate(0deg) scale(1.05)'
+              }}
+              onMouseLeave={e => {
+                e.target.style.transform = 'rotate(5deg) scale(1)'
+              }}
             />
           </div>
         </Grid>