diff --git a/src/components/BookCard.tsx b/src/components/BookCard.tsx
index b8d43e9..b4a1dd8 100644
--- a/src/components/BookCard.tsx
+++ b/src/components/BookCard.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Link from "next/link";
-import { FaEdit, FaTrash, FaCheckSquare } from "react-icons/fa";
+import { FaEdit, FaTrash, FaCheckSquare, FaRegSquare } from "react-icons/fa";
 import { useSession } from "next-auth/react";
 import { toast } from "react-toastify";
 import { useRouter } from "next/router";
@@ -119,20 +119,21 @@ const BookCard = ({ _id, title, author, start, end }) => {
         <div className="flex justify-start border-t-2 pt-3 mt-4 text-xl">
           <span className="mr-4" title="edit book">
             <Link href={`/admin/${_id}/edit`}>
-              <FaEdit className="text-blue-400 cursor-pointer" />
+              <FaEdit className="text-blue-400 cursor-pointer text-2xl" />
             </Link>
           </span>
           <span className="mr-4" title="delete book">
             <FaTrash
-              className="text-red-600 cursor-pointer"
+              className="text-red-600 cursor-pointer text-2xl"
               onClick={handleDeleteBook}
             />
           </span>
-          <span title="mark as complete">
-            <FaCheckSquare
-              className="text-green-600 cursor-pointer"
-              onClick={handleCompleteBook}
-            />
+          <span title="mark as complete" onClick={handleCompleteBook}>
+            {end ? (
+              <FaCheckSquare className="text-green-600 cursor-pointer text-2xl" />
+            ) : (
+              <FaRegSquare className="text-green-600 cursor-pointer text-2xl" />
+            )}
           </span>
         </div>
       )}
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
index dfd0826..ebf2890 100644
--- a/src/components/layout/index.tsx
+++ b/src/components/layout/index.tsx
@@ -6,7 +6,7 @@ import Footer from "./Footer";
 
 const Layout = ({ children }) => {
   return (
-    <div className="flex flex-col min-h-screen dynamic">
+    <div className="flex flex-col min-h-screen dynamic bg-gray-100">
       <Nav />
       <ToastContainer />
       <main className="grid flex-1 p-4 mt-16">{children}</main>
diff --git a/src/pages/api/books/update.ts b/src/pages/api/books/update.ts
index 488d2fa..1d0ddea 100644
--- a/src/pages/api/books/update.ts
+++ b/src/pages/api/books/update.ts
@@ -70,7 +70,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 
       // Update book finish date
       const book = await Book.findById(id);
-      book.end = new Date();
+      book.end ? (book.end = null) : (book.end = new Date());
       await book.save();
 
       return res.status(201).json({