diff --git a/src/components/anime/EpisodeCard.tsx b/src/components/anime/EpisodeCard.tsx
index e47d9845..f61d265c 100644
--- a/src/components/anime/EpisodeCard.tsx
+++ b/src/components/anime/EpisodeCard.tsx
@@ -46,12 +46,12 @@ const useStyles = makeStyles((theme) => ({
     card: {
         margin: '10px',
         '&:hover': {
-            backgroundColor: 'rgba(255, 255, 255, 0.2)',
-            transition: 'background-color 0ms ease',
+            backgroundColor: theme.palette.action.hover,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
         },
         '&:active': {
-            backgroundColor: 'rgba(255, 255, 255, 0.1)',
-            transition: 'background-color 100ms ease-out',
+            backgroundColor: theme.palette.action.selected,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
         },
     },
 }));
diff --git a/src/components/anime/SourceCard.tsx b/src/components/anime/SourceCard.tsx
index f888787e..7dc61d2e 100644
--- a/src/components/anime/SourceCard.tsx
+++ b/src/components/anime/SourceCard.tsx
@@ -41,6 +41,14 @@ const useStyles = makeStyles((theme) => ({
     },
     card: {
         margin: '10px',
+        '&:hover': {
+            backgroundColor: theme.palette.action.hover,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+        },
+        '&:active': {
+            backgroundColor: theme.palette.action.selected,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+        },
     },
 }));
 
diff --git a/src/components/manga/ChapterCard.tsx b/src/components/manga/ChapterCard.tsx
index 007a1d4f..b195353d 100644
--- a/src/components/manga/ChapterCard.tsx
+++ b/src/components/manga/ChapterCard.tsx
@@ -46,12 +46,12 @@ const useStyles = makeStyles((theme) => ({
     card: {
         margin: '10px',
         '&:hover': {
-            backgroundColor: 'rgba(255, 255, 255, 0.2)',
-            transition: 'background-color 0ms ease',
+            backgroundColor: theme.palette.action.hover,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
         },
         '&:active': {
-            backgroundColor: 'rgba(255, 255, 255, 0.1)',
-            transition: 'background-color 100ms ease-out',
+            backgroundColor: theme.palette.action.selected,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
         },
     },
 }));
diff --git a/src/components/manga/SourceCard.tsx b/src/components/manga/SourceCard.tsx
index 180c71ef..480c2d8d 100644
--- a/src/components/manga/SourceCard.tsx
+++ b/src/components/manga/SourceCard.tsx
@@ -46,12 +46,12 @@ const useStyles = makeStyles((theme) => ({
     card: {
         margin: '10px',
         '&:hover': {
-            backgroundColor: 'rgba(255, 255, 255, 0.2)',
-            transition: 'background-color 0ms ease',
+            backgroundColor: theme.palette.action.hover,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
         },
         '&:active': {
-            backgroundColor: 'rgba(255, 255, 255, 0.1)',
-            transition: 'background-color 100ms ease-out',
+            backgroundColor: theme.palette.action.selected,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
         },
     },
     showMobile: {