diff --git a/src/assets/images/subtab_tail_dark.svg b/src/assets/images/subtab_tail_dark.svg
new file mode 100644
index 00000000..e7dcfc5a
--- /dev/null
+++ b/src/assets/images/subtab_tail_dark.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Subtract" d="M0 0V20H20C8.95431 20 0 11.0457 0 0Z" fill="#292929"/>
+</svg>
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
index bc2d8694..efaa8c16 100644
--- a/src/components/Card/index.tsx
+++ b/src/components/Card/index.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react'
 import Tail from 'images/tab_tail.svg'
 import SubTail from 'images/subtab_tail.svg'
+import SubTailDark from 'images/subtab_tail_dark.svg'
 import Image from 'next/image'
 export default function Card({
   title,
@@ -27,11 +28,30 @@ export function SubCard({
   title,
   children,
   className,
+  theme,
 }: {
   className?: string
+  theme?: string
   title: string | ReactNode
   children: ReactNode
 }) {
+  if (theme == 'dark') {
+    return (
+      <div className={className}>
+        <div className='max-w-[90%] relative rounded-[20px_20px_0px_0px] text-sm leading-6 font-bold text-primary-color px-5 py-[5px] lg:py-[10px] lg:px-[50px] lg:text-xl lg:leading-6 bg-[#292929] w-fit drop-shadow-[5px_0px_5px_rgba(0,0,0,0.1)]'>
+          {title}
+          <span className='absolute -right-5 bottom-0'>
+            <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'>
+              <path d='M0 0V20H20C8.95431 20 0 11.0457 0 0Z' fill='#292929' />
+            </svg>
+          </span>
+        </div>
+        <div className='bg-[#292929] p-[10px] rounded-[0px_20px_20px_20px] z-10 relative lg:py-5 lg:px-10'>
+          {children}
+        </div>
+      </div>
+    )
+  }
   return (
     <div className={className}>
       <div className='max-w-[90%] relative rounded-[20px_20px_0px_0px] text-sm leading-6 font-bold text-second-color px-5 py-[5px] lg:py-[10px] lg:px-[50px] lg:text-xl lg:leading-6 bg-light-medium-gray w-fit drop-shadow-[5px_0px_5px_rgba(0,0,0,0.1)]'>
diff --git a/src/components/pages/chapter/comicDetail.tsx b/src/components/pages/chapter/comicDetail.tsx
index 8e1c9e31..98f2ef3e 100644
--- a/src/components/pages/chapter/comicDetail.tsx
+++ b/src/components/pages/chapter/comicDetail.tsx
@@ -20,6 +20,7 @@ import { Tab } from '@headlessui/react'
 import Ninja from 'images/ninja-2.svg'
 import Link from 'next/link'
 import { CHAPTER_STATUS } from 'src/constants/chapter.constant'
+import NFTList from './nftList'
 
 export default function ComicDetail({
   data,
@@ -298,10 +299,14 @@ export default function ComicDetail({
                 />
               </Tab.Panel>
               <Tab.Panel className='flex-1 flex flex-col'>
-                <div className='flex-1 w-full flex flex-col items-center justify-center mt-[136px]'>
-                  <Image src={Ninja} alt='' className='h-[260px] aspect-square mx-auto' />
-                  <div className='font-extrabold text-2xl leading-6 mt-[10px]'>Artist Composing</div>
-                </div>
+                {!!data.collections.length ? (
+                  <NFTList theme={undefined} collections={data.collections} />
+                ) : (
+                  <div className='flex-1 w-full flex flex-col items-center justify-center mt-[136px]'>
+                    <Image src={Ninja} alt='' className='h-[260px] aspect-square mx-auto' />
+                    <div className='font-extrabold text-2xl leading-6 mt-[10px]'>Artist Composing</div>
+                  </div>
+                )}
               </Tab.Panel>
             </Tab.Panels>
           </Tab.Group>
diff --git a/src/components/pages/chapter/nftList.tsx b/src/components/pages/chapter/nftList.tsx
index 0872853e..30840cd1 100644
--- a/src/components/pages/chapter/nftList.tsx
+++ b/src/components/pages/chapter/nftList.tsx
@@ -6,15 +6,15 @@ import { useTranslation } from 'react-i18next'
 import { SubCard } from 'components/Card'
 import ShareIcon from 'images/icons/share.svg'
 
-export default function NFTList({ collections }) {
+export default function NFTList({ collections, theme }) {
   const { t } = useTranslation()
   const seekhypeBaseUrl = new URL(getConfig().SEEKHYPE_URL).origin
-  console.log(collections)
   return (
-    <>
+    <div className='p-5 flex flex-col gap-5 bg-black lg:py-10 lg:px-0 lg:bg-transparent lg:w-[calc(100%-140px)] lg:gap-10'>
       {collections?.map((collection, index) => (
         <SubCard
           key={index}
+          theme={theme}
           title={
             <div className='flex gap-[10px]'>
               <div className='text-sm leading-6 truncate lg:text-xl lg:leading-6'>{collection.name}</div>
@@ -23,7 +23,23 @@ export default function NFTList({ collections }) {
                 title={t('View more on SEEKHYPE')}
                 href={`${seekhypeBaseUrl}/collection/${collection.address}`}
                 className='cursor-pointer'>
-                <Image src={ShareIcon} alt='' className='w-5 h-5' />
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  width='20'
+                  height='20'
+                  viewBox='0 0 20 20'
+                  fill='none'
+                  className={theme == 'dark' ? `[&_path]:stroke-primary-color` : `[&_path]:stroke-second-color`}>
+                  <path
+                    d='M10.8342 18.3328C14.2134 18.3267 15.9829 18.2438 17.1138 17.1129C18.3342 15.8925 18.3342 13.9283 18.3342 9.99996C18.3342 6.07159 18.3342 4.1074 17.1138 2.88701C15.8934 1.66663 13.9292 1.66663 10.0008 1.66663C6.07245 1.66663 4.10826 1.66663 2.88788 2.88701C1.75702 4.01787 1.67405 5.7874 1.66797 9.16663'
+                    strokeLinecap='round'
+                  />
+                  <path
+                    d='M2.5 17.5L9.16667 10.8334M9.16667 10.8334H4.16667M9.16667 10.8334V15.8334'
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                  />
+                </svg>
               </Link>
             </div>
           }>
@@ -34,7 +50,7 @@ export default function NFTList({ collections }) {
                 href={`${seekhypeBaseUrl}/nft/${collection.address}/${token.id}`}
                 key={index}
                 className='p-[5px] lg:p-5 [&:hover_.view-on-seekhype]:translate-y-0'>
-                <div className='bg-white rounded-[20px] p-[10px]'>
+                <div className={`${theme == 'dark' ? 'bg-[#414141]' : 'bg-white'} rounded-[20px] p-[10px]`}>
                   <div className='w-full aspect-square rounded-[15px] overflow-hidden relative'>
                     <Image
                       src={token.image || NoImage}
@@ -47,7 +63,10 @@ export default function NFTList({ collections }) {
                       {t('View on SEEKHYPE')}
                     </div>
                   </div>
-                  <div className='mt-[10px] text-subtle-dark text-sm font-bold leading-[18px] text-center truncate lg:text-xl lg:leading-[25px]'>
+                  <div
+                    className={`mt-[10px] ${
+                      theme == 'dark' ? 'text-white' : 'text-subtle-dark'
+                    } text-sm font-bold leading-[18px] text-center truncate lg:text-xl lg:leading-[25px]`}>
                     {token.name}
                   </div>
                 </div>
@@ -56,6 +75,6 @@ export default function NFTList({ collections }) {
           </div>
         </SubCard>
       ))}
-    </>
+    </div>
   )
 }
diff --git a/src/components/pages/homepage/comic.tsx b/src/components/pages/homepage/comic.tsx
index bc12cfae..58864166 100644
--- a/src/components/pages/homepage/comic.tsx
+++ b/src/components/pages/homepage/comic.tsx
@@ -16,29 +16,25 @@ export default function Comic(props: IComic) {
   return (
     <div className={`${props.status.text == 'Upcoming' ? '[&_a:not(.author)]:pointer-events-none' : ''}`}>
       <div className='hidden md:flex gap-[20px]'>
-        <Link href={`/comic/${props.id}`} className='flex-auto w-1/3 xl:hidden'>
+        <Link href={`/comic/${props.id}`} className=' xl:hidden shrink-0 block w-[180px] aspect-[180/240] mx-auto'>
           <Image
             src={props.image || NoImage}
             alt=''
             width={180}
             height={240}
-            className={`${
-              props.image ? 'object-cover' : 'object-contain bg-light-gray'
-            } rounded-[15px] w-[180px] aspect-[180/240] mx-auto`}
+            className={`w-full h-full ${props.image ? 'object-cover' : 'object-contain bg-light-gray'} rounded-[15px] `}
           />
         </Link>
-        <Link href={`/comic/${props.id}/chapter/1`} className='flex-auto w-1/3 hidden xl:block'>
+        <Link href={`/comic/${props.id}/chapter/1`} className='shrink-0 w-[180px] aspect-[180/240] hidden xl:block'>
           <Image
             src={props.image || NoImage}
             alt=''
             width={180}
             height={240}
-            className={`${
-              props.image ? 'object-cover' : 'object-contain bg-light-gray'
-            } rounded-[15px] w-[180px] aspect-[180/240]`}
+            className={`w-full h-full ${props.image ? 'object-cover' : 'object-contain bg-light-gray'} rounded-[15px] `}
           />
         </Link>
-        <div className='flex-auto w-2/3 flex flex-col justify-between gap-[10px]'>
+        <div className='flex-auto w-[calc(100%-200px)] flex flex-col justify-between gap-[10px]'>
           <div className='flex flex-col gap-[10px]'>
             <div>
               <div className='flex justify-between xl:hidden items-start flex-nowrap'>
@@ -88,7 +84,7 @@ export default function Comic(props: IComic) {
                 <strong>{props.likes.toLocaleString('en-US')}</strong> {props.likes > 1 ? t('likes') : t('like')}
               </div>
             </div>
-            <div className=' text-[16px] leading-[20px] line-clamp-3'>{props[locale].description}</div>
+            <div className=' text-[16px] leading-[20px] line-clamp-3 break-words'>{props[locale].description}</div>
           </div>
           {!!props.latestChap.number && (
             <div className='leading-[20px]'>
diff --git a/src/components/pages/homepage/trendingComic.tsx b/src/components/pages/homepage/trendingComic.tsx
index 8c3d928c..1fa39d71 100644
--- a/src/components/pages/homepage/trendingComic.tsx
+++ b/src/components/pages/homepage/trendingComic.tsx
@@ -42,7 +42,7 @@ export default function TrendingComic(props: IComic) {
           }`}
         />
       </Link>
-      <div className='flex-1 flex flex-col gap-[10px]'>
+      <div className='flex-auto w-[calc(100%-170px)] flex flex-col gap-[10px]'>
         <div>
           <Link
             href={`/comic/${props.id}`}
diff --git a/src/models/comic.ts b/src/models/comic.ts
index 723f9a41..b7378547 100644
--- a/src/models/comic.ts
+++ b/src/models/comic.ts
@@ -39,6 +39,7 @@ interface Detail {
     }
   >
   chapters: IChapter[]
+  collections: any[]
   isSubscribe?: boolean
 }
 
diff --git a/src/pages/artist/[artist]/artist.tsx b/src/pages/artist/[artist]/artist.tsx
index 2de3deb9..69d0643b 100644
--- a/src/pages/artist/[artist]/artist.tsx
+++ b/src/pages/artist/[artist]/artist.tsx
@@ -32,7 +32,7 @@ export default function Artist({ artistDetail }) {
   if (!artist) return <></>
   return (
     <>
-      <HeadComponent title={`Sunday | Punkga.me`} />
+      <HeadComponent title={`${artist.name} | Punkga.me`} />
       <Header />
       <div className='px-[10px] lg:px-0 lg:py-[47px] py-[17px] pk-container'>
         <div className='flex gap-[10px] lg:gap-[60px] px-[10px] lg:px-0'>
diff --git a/src/pages/comic/[comicId]/chapter/[chapterNumber]/chapter.tsx b/src/pages/comic/[comicId]/chapter/[chapterNumber]/chapter.tsx
index f1c40156..fdb44eba 100644
--- a/src/pages/comic/[comicId]/chapter/[chapterNumber]/chapter.tsx
+++ b/src/pages/comic/[comicId]/chapter/[chapterNumber]/chapter.tsx
@@ -99,6 +99,14 @@ const Chapter: React.FC = ({
     return () => clearInterval(commentIntervalId.current)
   }, [openComments])
 
+  useEffect(() => {
+    window.addEventListener('keydown', (e) => {
+      if (e.which == 27) {
+        setMode('minscreen')
+      }
+    })
+  }, [])
+
   useEffect(() => {
     if (comicDetails?.data?.id && account) {
       const currentReading = getItem('current_reading_manga')
diff --git a/src/pages/comic/[comicId]/chapter/[chapterNumber]/with-api.tsx b/src/pages/comic/[comicId]/chapter/[chapterNumber]/with-api.tsx
index ff21795d..b716bbf1 100644
--- a/src/pages/comic/[comicId]/chapter/[chapterNumber]/with-api.tsx
+++ b/src/pages/comic/[comicId]/chapter/[chapterNumber]/with-api.tsx
@@ -44,7 +44,10 @@ const withApi = (Component: React.FC<any>) => (props: any) => {
       isLiked: !!data.chapters_likes.length,
     }
 
-    if (data.chapter_type == CHAPTER_TYPE.ACCOUNT_ONLY || data.chapter_type == CHAPTER_TYPE.NFTS_ONLY) {
+    if (
+      (data.chapter_type == CHAPTER_TYPE.ACCOUNT_ONLY || data.chapter_type == CHAPTER_TYPE.NFTS_ONLY) &&
+      account?.id
+    ) {
       const { data: protectedData } = await privateAxios.get(`${config.REST_API_URL}/chapter/${data.id}/protected`)
       LANGUAGE.forEach((l) => {
         const chapterLanguage = protectedData.data.chapters[0].chapter_languages.find((cl) => cl.language_id == l.id)
diff --git a/src/pages/comic/[comicId]/comic.tsx b/src/pages/comic/[comicId]/comic.tsx
index 99c2155e..4e275236 100644
--- a/src/pages/comic/[comicId]/comic.tsx
+++ b/src/pages/comic/[comicId]/comic.tsx
@@ -173,7 +173,7 @@ export default function Comic({ comicDetails, subscribe, unsubscribe, like, unli
               </Tab.Panel>
               <Tab.Panel className='flex-1 flex flex-col'>
                 {!!comicDetails.data.collections.length ? (
-                  <NFTList collections={comicDetails.data.collections} />
+                  <NFTList theme='dark' collections={comicDetails.data.collections} />
                 ) : (
                   <div className='flex-1 w-full bg-[#292929]/80 flex flex-col items-center justify-center'>
                     <Image src={Ninja} alt='' className='h-[260px] aspect-square mx-auto opacity-60' />
diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx
index 0634be11..871849bd 100644
--- a/src/pages/search/index.tsx
+++ b/src/pages/search/index.tsx
@@ -23,7 +23,7 @@ export default function Search() {
         <p className='md:text-2xl font-extrabold leading-6 mt-2 md:mt-10'>{`${searchComic.data?.length} ${t(
           'results for'
         )} "${keyword}"`}</p>
-        <div className='mt-2 md:mt-10 grid grid-cols-2 gap-10'>
+        <div className='mt-2 md:mt-10 grid grid-cols-2 lg:grid-cols-3 gap-10 lg:gap-y-20'>
           {searchComic.loading
             ? Array.apply(null, Array(6)).map((d, index) => {
                 return <DummyComic key={index} />