diff --git a/src/app/(main)/manga/[mangaId]/components/ChapterCard.tsx b/src/app/(main)/manga/[mangaId]/components/ChapterCard.tsx
index 3fe0f9c..2ac5f99 100644
--- a/src/app/(main)/manga/[mangaId]/components/ChapterCard.tsx
+++ b/src/app/(main)/manga/[mangaId]/components/ChapterCard.tsx
@@ -92,7 +92,7 @@ function ChapterCard({
   return (
     <div className="flex flex-row gap-4">
       <Card
-        className="z-0 flex w-full flex-row items-center justify-between p-2 px-8"
+        className="z-0 flex w-full cursor-pointer flex-row items-center justify-between p-2 px-8"
         onClick={() => {
           router.push(`${ROUTE.MANGA}/${mangaId}/${chapter.chapterId}`);
         }}
diff --git a/src/app/(main)/manga/[mangaId]/components/Chapters.tsx b/src/app/(main)/manga/[mangaId]/components/Chapters.tsx
index ba0879e..bbb65ec 100644
--- a/src/app/(main)/manga/[mangaId]/components/Chapters.tsx
+++ b/src/app/(main)/manga/[mangaId]/components/Chapters.tsx
@@ -1,5 +1,6 @@
 import { BookPlusIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
+import { useSession } from 'next-auth/react';
 
 import ChapterCard from './ChapterCard';
 import { ChapterDTO } from '../types';
@@ -21,22 +22,25 @@ function Chapters({
   refetchData,
 }: ChaptersProps) {
   const router = useRouter();
+  const { data: session } = useSession();
 
   return (
     <div className="flex flex-col gap-2">
       <p className="text-2xl">Chapters</p>
       <div>
-        <Button
-          variant="outline"
-          onClick={() => {
-            router.push(`/chapter/add?mangaId=${mangaId}`);
-          }}
-          className="w-full p-6"
-        >
-          <p className="flex flex-row gap-4">
-            Add Chapter <BookPlusIcon />
-          </p>
-        </Button>
+        {session?.user?.accessToken ? (
+          <Button
+            variant="outline"
+            onClick={() => {
+              router.push(`/chapter/add?mangaId=${mangaId}`);
+            }}
+            className="w-full p-6"
+          >
+            <p className="flex flex-row gap-4">
+              Add Chapter <BookPlusIcon />
+            </p>
+          </Button>
+        ) : null}
       </div>
       <div className={`${className} flex flex-col gap-4`}>
         {chapters?.length !== 0 ? (
diff --git a/src/app/(main)/manga/page.tsx b/src/app/(main)/manga/page.tsx
index b52f746..2aad957 100644
--- a/src/app/(main)/manga/page.tsx
+++ b/src/app/(main)/manga/page.tsx
@@ -64,7 +64,7 @@ function MangaPage() {
 
   const handleClear = () => {
     setValue('title', '');
-    setValue('genre', undefined);
+    setValue('genre', '');
     setValue('rating', 0);
 
     fetchManga().then((data) => setManga(data));
@@ -144,8 +144,9 @@ function MangaPage() {
         <MangaList manga={manga} />
       </div>
       <Button
-        className="mx-16"
-        disabled={manga?.length % 6 != 0}
+        className="mx-auto w-[500px]"
+        variant="outline"
+        disabled={manga?.length % 6 != 0 || manga?.length == 0}
         onClick={handleLoadNewPage}
       >
         <LucideArrowBigDownDash />