diff --git a/server/src/main/kotlin/ir/armor/tachidesk/impl/Chapter.kt b/server/src/main/kotlin/ir/armor/tachidesk/impl/Chapter.kt
index 6f8fb5f..1255c19 100644
--- a/server/src/main/kotlin/ir/armor/tachidesk/impl/Chapter.kt
+++ b/server/src/main/kotlin/ir/armor/tachidesk/impl/Chapter.kt
@@ -167,15 +167,17 @@ object Chapter {
 
     fun modifyChapter(mangaId: Int, chapterIndex: Int, isRead: Boolean?, isBookmarked: Boolean?, markPrevRead: Boolean?, lastPageRead: Int?) {
         transaction {
-            ChapterTable.update({ (ChapterTable.manga eq mangaId) and (ChapterTable.chapterIndex eq chapterIndex) }) { update ->
-                isRead?.also {
-                    update[ChapterTable.isRead] = it
-                }
-                isBookmarked?.also {
-                    update[ChapterTable.isBookmarked] = it
-                }
-                lastPageRead?.also {
-                    update[ChapterTable.lastPageRead] = it
+            if (listOf(isRead, isBookmarked, lastPageRead).any { it != null }) {
+                ChapterTable.update({ (ChapterTable.manga eq mangaId) and (ChapterTable.chapterIndex eq chapterIndex) }) { update ->
+                    isRead?.also {
+                        update[ChapterTable.isRead] = it
+                    }
+                    isBookmarked?.also {
+                        update[ChapterTable.isBookmarked] = it
+                    }
+                    lastPageRead?.also {
+                        update[ChapterTable.lastPageRead] = it
+                    }
                 }
             }
 
diff --git a/webUI/react/src/components/ChapterCard.tsx b/webUI/react/src/components/ChapterCard.tsx
index 9877c06..7f356b9 100644
--- a/webUI/react/src/components/ChapterCard.tsx
+++ b/webUI/react/src/components/ChapterCard.tsx
@@ -16,6 +16,7 @@ import Typography from '@material-ui/core/Typography';
 import { Link, useHistory } from 'react-router-dom';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
+import BookmarkIcon from '@material-ui/icons/Bookmark';
 import client from '../util/client';
 
 const useStyles = makeStyles((theme) => ({
@@ -25,6 +26,9 @@ const useStyles = makeStyles((theme) => ({
         alignItems: 'center',
         padding: 16,
     },
+    read: {
+        backgroundColor: theme.palette.type === 'dark' ? '#353535' : '#f0f0f0',
+    },
     bullet: {
         display: 'inline-block',
         margin: '0 2px',
@@ -73,15 +77,13 @@ export default function ChapterCard(props: IProps) {
         const formData = new FormData();
         formData.append(key, value);
         client.patch(`/api/v1/manga/${chapter.mangaId}/chapter/${chapter.index}`, formData);
-        // .finally(() => triggerUpdate()
-        // );
     };
 
     return (
         <>
             <li>
                 <Card>
-                    <CardContent className={classes.root}>
+                    <CardContent className={`${classes.root} ${chapter.read && classes.read}`}>
                         <Link
                             to={`/manga/${chapter.mangaId}/chapter/${chapter.index}`}
                             style={{
@@ -91,8 +93,10 @@ export default function ChapterCard(props: IProps) {
                         >
                             <div style={{ display: 'flex' }}>
                                 <div style={{ display: 'flex', flexDirection: 'column' }}>
-
                                     <Typography variant="h5" component="h2">
+                                        <span style={{ color: theme.palette.primary.dark }}>
+                                            {chapter.bookmarked && <BookmarkIcon />}
+                                        </span>
                                         {chapter.name}
                                         {chapter.chapterNumber > 0 && ` : ${chapter.chapterNumber}`}
                                     </Typography>