diff --git a/src/components/ListView.js b/src/components/ListView.js
index 86672658..00954854 100644
--- a/src/components/ListView.js
+++ b/src/components/ListView.js
@@ -3,6 +3,7 @@ import { StyleSheet, View, Text, Pressable } from 'react-native';
 
 import FastImage from 'react-native-fast-image';
 import { defaultCoverUri } from '../sources/helpers/constants';
+import { coverPlaceholderColor } from '../theme/colors';
 
 const ListView = ({
   item,
@@ -14,11 +15,6 @@ const ListView = ({
   isSelected,
   onLongPress,
 }) => {
-  const uri =
-    item.novelCover && !item.novelCover.startsWith('/')
-      ? item.novelCover
-      : defaultCoverUri;
-
   return (
     <Pressable
       android_ripple={{ color: theme.rippleColor }}
@@ -31,7 +27,7 @@ const ListView = ({
     >
       <FastImage
         source={{
-          uri,
+          uri: item.novelCover,
         }}
         style={[styles.extensionIcon, inLibraryBadge && { opacity: 0.5 }]}
       />
@@ -64,6 +60,7 @@ const styles = StyleSheet.create({
     width: 40,
     height: 40,
     borderRadius: 4,
+    backgroundColor: coverPlaceholderColor,
   },
   novelName: {
     flex: 1,
diff --git a/src/components/NovelCover.js b/src/components/NovelCover.js
index 44ba498e..94d99c0c 100644
--- a/src/components/NovelCover.js
+++ b/src/components/NovelCover.js
@@ -15,6 +15,7 @@ import ListView from './ListView';
 import { useDeviceOrientation } from '../services/utils/helpers';
 import { useSettings } from '../hooks/reduxHooks';
 import { defaultCoverUri } from '../sources/helpers/constants';
+import { coverPlaceholderColor } from '../theme/colors';
 
 const NovelCover = ({
   item,
@@ -43,10 +44,7 @@ const NovelCover = ({
 
   const selectNovel = () => onLongPress && onLongPress(item.novelId);
 
-  const uri =
-    item.novelCover && !item.novelCover.startsWith('/')
-      ? item.novelCover
-      : defaultCoverUri;
+  const uri = item.novelCover;
 
   return displayMode !== 2 ? (
     <View
@@ -92,7 +90,11 @@ const NovelCover = ({
         <FastImage
           source={{ uri }}
           style={[
-            { height: getHeight(), borderRadius: 4 },
+            {
+              height: getHeight(),
+              borderRadius: 4,
+              backgroundColor: coverPlaceholderColor,
+            },
             libraryStatus && { opacity: 0.5 },
           ]}
         />
diff --git a/src/screens/browse/components/SourceCard/SourceCard.tsx b/src/screens/browse/components/SourceCard/SourceCard.tsx
index f56c31b4..0fc3b5f7 100644
--- a/src/screens/browse/components/SourceCard/SourceCard.tsx
+++ b/src/screens/browse/components/SourceCard/SourceCard.tsx
@@ -5,6 +5,7 @@ import { Button, IconButtonV2 } from '../../../../components';
 import { ButtonVariation } from '../../../../components/Button/Button';
 
 import { Source } from '../../../../sources/types';
+import { coverPlaceholderColor } from '../../../../theme/colors';
 import { ThemeTypeV1 } from '../../../../theme/v1/theme/types';
 
 interface Props {
@@ -72,6 +73,7 @@ const styles = StyleSheet.create({
     height: 40,
     width: 40,
     borderRadius: 4,
+    backgroundColor: coverPlaceholderColor,
   },
   details: {
     marginLeft: 16,
diff --git a/src/screens/browse/globalsearch/GlobalSearchNovelCover.js b/src/screens/browse/globalsearch/GlobalSearchNovelCover.js
index 3851ad0e..0e4d87ec 100644
--- a/src/screens/browse/globalsearch/GlobalSearchNovelCover.js
+++ b/src/screens/browse/globalsearch/GlobalSearchNovelCover.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, View, Text, Image, Pressable } from 'react-native';
 import { defaultCoverUri } from '../../../sources/helpers/constants';
+import { coverPlaceholderColor } from '../../../theme/colors';
 
 const GlobalSearchNovelCover = ({
   novel,
@@ -11,8 +12,7 @@ const GlobalSearchNovelCover = ({
 }) => {
   const { novelName, novelCover } = novel;
 
-  const uri =
-    novelCover && !novelCover.startsWith('/') ? novelCover : defaultCoverUri;
+  const uri = novelCover;
 
   return (
     <View style={styles.container}>
@@ -56,6 +56,7 @@ const styles = StyleSheet.create({
     height: 150,
     width: 115,
     borderRadius: 4,
+    backgroundColor: coverPlaceholderColor,
   },
   title: {
     fontFamily: 'pt-sans-bold',
diff --git a/src/screens/history/components/HistoryCard/HistoryCard.tsx b/src/screens/history/components/HistoryCard/HistoryCard.tsx
index 13ebdc66..628b4384 100644
--- a/src/screens/history/components/HistoryCard/HistoryCard.tsx
+++ b/src/screens/history/components/HistoryCard/HistoryCard.tsx
@@ -10,6 +10,7 @@ import { parseChapterNumber } from '../../../../utils/parseChapterNumber';
 
 import { History } from '../../../../database/types';
 import { ThemeTypeV1 } from '../../../../theme/v1/theme/types';
+import { coverPlaceholderColor } from '../../../../theme/colors';
 
 interface HistoryCardProps {
   history: History;
@@ -128,6 +129,7 @@ const styles = StyleSheet.create({
     height: 80,
     width: 56,
     borderRadius: 4,
+    backgroundColor: coverPlaceholderColor,
   },
   detailsContainer: {
     flex: 1,
diff --git a/src/screens/novel/components/Info/NovelInfoComponents.js b/src/screens/novel/components/Info/NovelInfoComponents.js
index 49741ffb..1c5f3695 100644
--- a/src/screens/novel/components/Info/NovelInfoComponents.js
+++ b/src/screens/novel/components/Info/NovelInfoComponents.js
@@ -15,6 +15,7 @@ import { easeGradient } from 'react-native-easing-gradient';
 import FastImage from 'react-native-fast-image';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 import { Chip } from '../../../../components';
+import { coverPlaceholderColor } from '../../../../theme/colors';
 
 const NovelInfoContainer = ({ children }) => (
   <View style={styles.novelInfoContainer}>{children}</View>
@@ -39,13 +40,17 @@ const CoverImage = ({ children, source, theme, hideBackdrop }) => {
             backgroundColor: `${theme.colorPrimaryDark}B4`,
           }}
         >
-          <LinearGradient
-            colors={colors}
-            locations={locations}
-            style={styles.linearGradient}
-          >
-            {children}
-          </LinearGradient>
+          {source.uri ? (
+            <LinearGradient
+              colors={colors}
+              locations={locations}
+              style={styles.linearGradient}
+            >
+              {children}
+            </LinearGradient>
+          ) : (
+            children
+          )}
         </View>
       </FastImage>
     );
@@ -242,12 +247,14 @@ const styles = StyleSheet.create({
   },
   linearGradient: {
     height: 271,
+    flex: 1,
   },
   novelThumbnail: {
     height: 150,
     width: 100,
     marginHorizontal: 4,
     borderRadius: 6,
+    backgroundColor: coverPlaceholderColor,
   },
   novelTitle: {
     fontSize: 18,
diff --git a/src/screens/novel/components/Info/NovelInfoHeader.js b/src/screens/novel/components/Info/NovelInfoHeader.js
index a8664238..b4a43eec 100644
--- a/src/screens/novel/components/Info/NovelInfoHeader.js
+++ b/src/screens/novel/components/Info/NovelInfoHeader.js
@@ -42,25 +42,6 @@ const NovelInfoHeader = ({
 
   const dispatch = useAppDispatch();
 
-  const getNovelCoverUrl = () => {
-    const defaultCover =
-      'https://github.com/LNReader/lnreader-sources/blob/main/src/coverNotAvailable.jpg?raw=true';
-
-    if (loading) {
-      if (item.novelCover && !item.novelCover.startsWith('/')) {
-        return item.novelCover;
-      } else {
-        return defaultCover;
-      }
-    } else {
-      if (novel.novelCover && !novel.novelCover.startsWith('/')) {
-        return novel.novelCover;
-      } else {
-        return defaultCover;
-      }
-    }
-  };
-
   const getStatusIcon = useMemo(
     () => ({
       Ongoing: 'clock-outline',
@@ -73,13 +54,13 @@ const NovelInfoHeader = ({
   return (
     <>
       <CoverImage
-        source={{ uri: getNovelCoverUrl() }}
+        source={{ uri: !loading ? novel.novelCover : item.novelCover }}
         theme={theme}
         hideBackdrop={hideBackdrop}
       >
         <NovelInfoContainer>
           <NovelThumbnail
-            source={{ uri: getNovelCoverUrl() }}
+            source={{ uri: !loading ? novel.novelCover : item.novelCover }}
             theme={theme}
             setCustomNovelCover={setCustomNovelCover}
           />
diff --git a/src/screens/updates/UpdatesScreen.tsx b/src/screens/updates/UpdatesScreen.tsx
index 4b4f2f45..8d828755 100644
--- a/src/screens/updates/UpdatesScreen.tsx
+++ b/src/screens/updates/UpdatesScreen.tsx
@@ -118,12 +118,19 @@ const UpdatesScreen = () => {
       } as never,
     );
 
-  const navigateToNovel = (sourceId: number, novelUrl: string) =>
+  const navigateToNovel = (
+    sourceId: number,
+    novelUrl: string,
+    novelName: string,
+    novelCover: string,
+  ) =>
     navigate(
       'Novel' as never,
       {
         sourceId,
         novelUrl,
+        novelName,
+        novelCover,
       } as never,
     );
 
diff --git a/src/screens/updates/components/UpdateCard/UpdateCard.tsx b/src/screens/updates/components/UpdateCard/UpdateCard.tsx
index 5bfa927f..c610b0f6 100644
--- a/src/screens/updates/components/UpdateCard/UpdateCard.tsx
+++ b/src/screens/updates/components/UpdateCard/UpdateCard.tsx
@@ -13,6 +13,7 @@ import { IconButtonV2 } from '../../../../components';
 import { useDownloadQueue } from '../../../../redux/hooks';
 import { Menu } from 'react-native-paper';
 import { ThemeTypeV1 } from '../../../../theme/v1/theme/types';
+import { coverPlaceholderColor } from '../../../../theme/colors';
 
 interface UpdateCardProps {
   item: Update;
@@ -24,7 +25,12 @@ interface UpdateCardProps {
     chapterUrl: string,
     isBookmarked: number,
   ) => void;
-  navigateToNovel: (sourceId: number, novelUrl: string) => void;
+  navigateToNovel: (
+    sourceId: number,
+    novelUrl: string,
+    novelName: string,
+    novelCover: string,
+  ) => void;
   handleDownloadChapter: (
     sourceId: number,
     novelUrl: string,
@@ -74,7 +80,14 @@ const UpdateCard: React.FC<UpdateCardProps> = ({
     >
       <View style={styles.imageContainer}>
         <Pressable
-          onPress={() => navigateToNovel(item.sourceId, item.novelUrl)}
+          onPress={() =>
+            navigateToNovel(
+              item.sourceId,
+              item.novelUrl,
+              item.novelName,
+              item.novelCover,
+            )
+          }
         >
           <FastImage source={{ uri: item.novelCover }} style={styles.cover} />
         </Pressable>
@@ -150,6 +163,7 @@ const styles = StyleSheet.create({
     height: 40,
     width: 40,
     borderRadius: 4,
+    backgroundColor: coverPlaceholderColor,
   },
   imageContainer: {
     flex: 1,
diff --git a/src/screens/updates/components/UpdatesItem.js b/src/screens/updates/components/UpdatesItem.js
index aa5cc849..2d7e1cfc 100644
--- a/src/screens/updates/components/UpdatesItem.js
+++ b/src/screens/updates/components/UpdatesItem.js
@@ -2,6 +2,7 @@ import React, { memo, useState } from 'react';
 import { View, Text, StyleSheet, Pressable } from 'react-native';
 
 import FastImage from 'react-native-fast-image';
+import { coverPlaceholderColor } from '../../../theme/colors';
 import { DownloadButton } from './DownloadButton';
 
 const UpdateCard = ({
@@ -26,12 +27,7 @@ const UpdateCard = ({
       <>
         <Pressable onPress={onPressCover}>
           <FastImage
-            source={{
-              uri:
-                item.novelCover && !item.novelCover.startsWith('/')
-                  ? item.novelCover
-                  : 'https://github.com/LNReader/lnreader-sources/blob/main/src/coverNotAvailable.jpg?raw=true',
-            }}
+            source={{ uri: item.novelCover }}
             style={styles.updateIcon}
           />
         </Pressable>
@@ -93,6 +89,7 @@ const styles = StyleSheet.create({
     width: 42,
     height: 42,
     borderRadius: 4,
+    backgroundColor: coverPlaceholderColor,
   },
   chapterDetails: {
     flex: 1,
diff --git a/src/theme/colors/index.ts b/src/theme/colors/index.ts
index da594d88..54532512 100644
--- a/src/theme/colors/index.ts
+++ b/src/theme/colors/index.ts
@@ -1,2 +1,4 @@
 export { default as textColors } from './textColors';
 export { default as errorColors } from './errorColors';
+
+export const coverPlaceholderColor = '#8888881F';