diff --git a/src/components/pages/artist/Artworks.tsx b/src/components/pages/artist/Artworks.tsx
index 1b69fd4..094ce28 100644
--- a/src/components/pages/artist/Artworks.tsx
+++ b/src/components/pages/artist/Artworks.tsx
@@ -1,26 +1,35 @@
 import { Pagination, Skeleton } from '@mui/material'
 import Mc from 'assets/images/mascot-empty.png'
 import Image from 'next/image'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getArtistArtworks } from 'src/services'
 import useSWR from 'swr'
 import Manga from '../homepage/manga'
+import Modal from 'components/Modal'
+
+import 'swiper/css'
+import 'swiper/css/grid'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Controller } from 'swiper/modules'
 export default function ArtworkList({ id }) {
   const [page, setPage] = useState(1)
+  const [open, setOpen] = useState(false)
+  const [index, setIndex] = useState(1)
   const { data, isLoading } = useSWR(
     {
       key: 'fetch-artist-artworks',
       id,
-      page,
     },
-    ({ id, page }) => (id ? getArtistArtworks(id, (page - 1) * 12) : null)
+    ({ id }) => (id ? getArtistArtworks(id) : null)
   )
 
   const { t } = useTranslation()
   if (isLoading) {
     return (
-      <div className='grid grid-cols-2 gap-4'>
+      <div className='grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4'>
         {Array(6)
           .fill(0)
           ?.map((c, index) => (
@@ -34,17 +43,45 @@ export default function ArtworkList({ id }) {
   return (
     <div>
       {data?.artworks?.length ? (
-        <div className='grid grid-cols-2 gap-4'>
-          {data?.artworks?.map((comic, index) => (
-            <div key={index}>
-              <Manga {...comic} />
-            </div>
-          ))}
-          <div></div>
-          <div></div>
-          <div></div>
-          <div></div>
-        </div>
+        <>
+          <Modal open={open} setOpen={setOpen} preventClickOutsideToClose={false}>
+            <Swiper slidesPerView={1} autoHeight initialSlide={index} >
+              {data?.artworks?.map((artwork, index) => (
+                <SwiperSlide key={index}>
+                  <Image
+                    width={300}
+                    height={300}
+                    src={artwork.url}
+                    alt=''
+                    className='w-full h-auto rounded-md object-cover'
+                  />
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </Modal>
+          <div className='grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4'>
+            {data?.artworks?.slice((page - 1) * 12, page * 12)?.map((artwork, index) => (
+              <div
+                key={index}
+                onClick={() => {
+                  setIndex(index)
+                  setOpen(true)
+                }}>
+                <Image
+                  width={300}
+                  height={300}
+                  src={artwork.url}
+                  alt=''
+                  className='w-full aspect-square rounded-md object-cover'
+                />
+              </div>
+            ))}
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+          </div>
+        </>
       ) : (
         <div className='flex flex-col items-center gap-4 py-8'>
           <Image src={Mc} alt='' className='w-[160px] h-[160px]' />
@@ -52,7 +89,7 @@ export default function ArtworkList({ id }) {
         </div>
       )}
       {!!data?.artworks_aggregate?.aggregate?.count && (
-        <div className='w-full flex justify-center -mt-8'>
+        <div className='w-full flex justify-center'>
           <Pagination
             shape='rounded'
             count={Math.ceil(data?.artworks_aggregate?.aggregate?.count / 12)}
diff --git a/src/components/pages/artist/Collections.tsx b/src/components/pages/artist/Collections.tsx
index 9bcbfec..7e62c20 100644
--- a/src/components/pages/artist/Collections.tsx
+++ b/src/components/pages/artist/Collections.tsx
@@ -1,26 +1,93 @@
-import { Pagination } from '@mui/material'
-import Manga from '../homepage/manga'
-import { useState } from 'react'
+import { Pagination, Skeleton } from '@mui/material'
 import Mc from 'assets/images/mascot-empty.png'
 import Image from 'next/image'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-export default function CollectionList({ list }) {
+import { getArtistArtworks, getArtistCollections } from 'src/services'
+import useSWR from 'swr'
+import Manga from '../homepage/manga'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+export default function CollectionList({ id }) {
   const [page, setPage] = useState(1)
-  console.log(list)
+  const { data, isLoading } = useSWR({ key: 'get-artist-collection', id }, ({ id }) =>
+    id ? getArtistCollections(id) : null
+  )
   const { t } = useTranslation()
+  const { locale } = useRouter()
+  if (isLoading) {
+    ;<div className='grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4'>
+      {Array(6)
+        .fill(0)
+        .map((_, i) => (
+          <div key={i}>
+            <Skeleton className='w-full aspect-[343/289]' />
+          </div>
+        ))}
+    </div>
+  }
   return (
     <div>
-      {list?.length ? (
-        <div className='grid grid-cols-2 gap-y-8 gap-x-[22px]'>
-          {list?.slice((page - 1) * 20, page * 20)?.map((comic, index) => (
-            <div key={index}>
-              <Manga {...comic} />
-            </div>
+      {data?.count ? (
+        <div className='grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4'>
+          {data?.launchpads?.slice((page - 1) * 4, page * 4)?.map((launchpad, index) => (
+            <Link
+              href={`/collections/${launchpad.slug}`}
+              className='w-full bg-white rounded-mlg p-4'
+              key={launchpad.id}>
+              <div className='grid gap-2 grid-cols-3'>
+                <Image
+                  alt=''
+                  src={launchpad.featured_images[0]}
+                  width={343}
+                  height={289}
+                  className={`object-cover w-full rounded-mlg ${
+                    launchpad.featured_images[2]
+                      ? 'aspect-[239/235] col-span-2'
+                      : 'aspect-[311/199] md:aspect-[373/235] col-span-3'
+                  }`}
+                />
+                {launchpad.featured_images[2] && (
+                  <div className={`flex flex-col gap-2 w-full col-span-1`}>
+                    <Image
+                      alt=''
+                      src={launchpad.featured_images[1]}
+                      width={343}
+                      height={289}
+                      className={`object-cover h-full rounded-mlg aspect-[126/113]`}
+                    />
+                    <Image
+                      alt=''
+                      src={launchpad.featured_images[2]}
+                      width={343}
+                      height={289}
+                      className={`object-cover h-full rounded-mlg aspect-[126/114]`}
+                    />
+                  </div>
+                )}
+              </div>
+              <div className='mt-4 flex items-center gap-2'>
+                {launchpad.launchpad_creator.avatar_url && (
+                  <Image
+                    src={launchpad.launchpad_creator.avatar_url}
+                    alt=''
+                    width={36}
+                    height={36}
+                    className='rounded-full w-[36px] h-[36px]'
+                  />
+                )}
+                <div>
+                  <div className='text-sm font-medium'>{launchpad[locale].name}</div>
+                  <div className='text-xs font-medium'>
+                    {t('by')}{' '}
+                    <Link href={`/artist/${launchpad.launchpad_creator.slug}`} className='text-text-brand-defaul'>
+                      {launchpad.launchpad_creator.pen_name}
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </Link>
           ))}
-          <div></div>
-          <div></div>
-          <div></div>
-          <div></div>
         </div>
       ) : (
         <div className='flex flex-col items-center gap-4 py-8'>
@@ -28,11 +95,11 @@ export default function CollectionList({ list }) {
           <div className='font-medium'>{t('No collection found')}</div>
         </div>
       )}
-      {!!list.length && (
-        <div className='w-full flex justify-center -mt-8'>
+      {!!data?.count && (
+        <div className='w-full flex justify-center mt-4'>
           <Pagination
             shape='rounded'
-            count={Math.ceil(list?.length / 20)}
+            count={Math.ceil(data?.count / 4)}
             page={page}
             onChange={(event: React.ChangeEvent<unknown>, value: number) => {
               setPage(value)
diff --git a/src/components/pages/artist/Contests.tsx b/src/components/pages/artist/Contests.tsx
index 460db7c..d31664e 100644
--- a/src/components/pages/artist/Contests.tsx
+++ b/src/components/pages/artist/Contests.tsx
@@ -7,7 +7,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getContests } from 'src/services'
 import useSWR from 'swr'
-export const Contests = ({ id }) => {
+export default function Contests({ id }) {
   const [page, setPage] = useState(1)
   const { t } = useTranslation()
   const { locale } = useRouter()
@@ -15,9 +15,8 @@ export const Contests = ({ id }) => {
     {
       key: 'fetch-artist-contest',
       id,
-      page,
     },
-    ({ id, page }) => (id ? getContests(id, (page - 1) * 4) : null)
+    ({ id }) => (id ? getContests(id) : null)
   )
 
   if (isLoading)
@@ -27,6 +26,7 @@ export const Contests = ({ id }) => {
         <Skeleton className='w-full aspect-[343/256]' />
       </div>
     )
+    console.log(data)
   return (
     <div>
       {data?.contest?.length ? (
diff --git a/src/components/pages/artist/Mangas.tsx b/src/components/pages/artist/Mangas.tsx
index 99c0e02..748185b 100644
--- a/src/components/pages/artist/Mangas.tsx
+++ b/src/components/pages/artist/Mangas.tsx
@@ -1,37 +1,52 @@
-import { Pagination } from '@mui/material'
-import Manga from '../homepage/manga'
-import { useState } from 'react'
+import { Pagination, Skeleton } from '@mui/material'
 import Mc from 'assets/images/mascot-empty.png'
 import Image from 'next/image'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-export default function MangaList({ list }) {
+import { getArtistMangas } from 'src/services'
+import useSWR from 'swr'
+import Manga from '../homepage/manga'
+export default function MangaList({ id }) {
+  const { data, isLoading } = useSWR({
+    key: 'fetch-artist-mangas',
+    id,
+  }, ({id}) => id ? getArtistMangas(id):null)
   const [page, setPage] = useState(1)
   const { t } = useTranslation()
+  if (isLoading) {
+    return (
+      <div className='grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-y-8 gap-x-[22px]'>
+        {Array(10)
+          .fill(0)
+          ?.map((c, index) => (
+            <div key={index}>
+              <Skeleton className='w-full aspect-[16/23]' />
+            </div>
+          ))}
+      </div>
+    )
+  }
   return (
     <div>
-      {list?.length ? (
-        <div className='grid grid-cols-2 gap-y-8 gap-x-[22px]'>
-          {list?.slice((page - 1) * 20, page * 20)?.map((comic, index) => (
+      {data?.length ? (
+        <div className='grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-y-8 gap-x-[22px]'>
+          {data?.slice((page - 1) * 20, page * 20)?.map((comic, index) => (
             <div key={index}>
               <Manga {...comic} />
             </div>
           ))}
-          <div></div>
-          <div></div>
-          <div></div>
-          <div></div>
         </div>
       ) : (
-        <div className='flex flex-col items-center gap-4'>
+        <div className='flex flex-col items-center gap-4 py-8'>
           <Image src={Mc} alt='' className='w-[160px] h-[160px]' />
           <div className='font-medium'>{t('No manga found')}</div>
         </div>
       )}
-      {!!list.length && (
-        <div className='w-full flex justify-center -mt-8'>
+      {!!data?.length && (
+        <div className='w-full flex justify-center mt-8'>
           <Pagination
             shape='rounded'
-            count={Math.ceil(list?.length / 20)}
+            count={Math.ceil(data?.length / 20)}
             page={page}
             onChange={(event: React.ChangeEvent<unknown>, value: number) => {
               setPage(value)
diff --git a/src/components/pages/homepage/manga.tsx b/src/components/pages/homepage/manga.tsx
index dfec803..2c6d5fb 100644
--- a/src/components/pages/homepage/manga.tsx
+++ b/src/components/pages/homepage/manga.tsx
@@ -27,7 +27,7 @@ export default function Manga(props: IComic) {
   return (
     <Link
       href={isMobile ? `/comic/${props.slug}` : `/comic/${props.slug}/chapter/1`}
-      className='w-full aspect-[16/23] rounded-[4px] relative overflow-hidden'>
+      className='w-full block aspect-[16/23] rounded-md relative overflow-hidden'>
       <Image
         src={props.image || NoImage}
         alt=''
diff --git a/src/pages/artist/[artist]/artist.tsx b/src/pages/artist/[artist]/artist.tsx
index a585a32..82ec3b8 100644
--- a/src/pages/artist/[artist]/artist.tsx
+++ b/src/pages/artist/[artist]/artist.tsx
@@ -1,5 +1,7 @@
 import Dropdown, { DropdownMenu, DropdownToggle } from 'components/Dropdown'
+import ArtworkList from 'components/pages/artist/Artworks'
 import CollectionList from 'components/pages/artist/Collections'
+import Contests from 'components/pages/artist/Contests'
 import MangaList from 'components/pages/artist/Mangas'
 import Manga from 'components/pages/homepage/manga'
 import DOMPurify from 'dompurify'
@@ -116,15 +118,19 @@ function Artist({ artistDetail, data }) {
                 </div>
               </DropdownToggle>
               <DropdownMenu closeOnClick>
-                <div className='p-3 space-y-2'>
+                <div className='p-2.5'>
                   <div
                     onClick={() => setTab('collections')}
-                    className={`${tab == 'collections' ? 'text-text-brand-defaul' : ''}`}>
+                    className={`py-3 font-semibold border-b border-border-teriary ${
+                      tab == 'collections' ? 'text-text-brand-defaul' : 'text-text-primary'
+                    }`}>
                     NFT Collections
                   </div>
                   <div
                     onClick={() => setTab('contests')}
-                    className={`${tab == 'contests' ? 'text-text-brand-defaul' : ''}`}>
+                    className={`py-3 font-semibold ${
+                      tab == 'contests' ? 'text-text-brand-defaul' : 'text-text-primary'
+                    }`}>
                     Contests
                   </div>
                 </div>
@@ -133,10 +139,10 @@ function Artist({ artistDetail, data }) {
           </div>
         </div>
         <div className='mt-8'>
-          {tab == 'mangas' && <MangaList list={artist.comics} />}
-          {tab == 'artworks' && <div></div>}
-          {tab == 'collections' && <CollectionList list={artist.collections} />}
-          {tab == 'contests' && <div></div>}
+          {tab == 'mangas' && <MangaList id={artist.id} />}
+          {tab == 'artworks' && <ArtworkList id={artist.id} />}
+          {tab == 'collections' && <CollectionList id={artist.id} />}
+          {tab == 'contests' && <Contests id={artist.id} />}
         </div>
       </div>
     </div>
diff --git a/src/services/index.ts b/src/services/index.ts
index 316616a..9fc6acc 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -633,7 +633,81 @@ export const mintNfts = async (launchpad_id: string, amount: number) => {
     console.log(error)
   }
 }
-export const getLicenseTerm = async (id: string) => {
-  const { data } = await axios.get(`https://edge.stg.storyprotocol.net/api/v1/licenses/terms/${id}`)
-  return data?.launchpad_by_pk
+
+export const getArtistMangas = async (id: string): Promise<IComic[]> => {
+  return await axios.get(`${getConfig().API_URL}/api/rest/public/creators/${id}/manga`).then((res) =>
+    res.data?.manga?.map((m: any) => {
+      const response = {
+        id: m.id,
+        slug: m.slug,
+        image: m.poster,
+        status: {
+          type: COMIC_STATUS[formatStatus(m.status)],
+          text: formatStatus(m.status),
+        },
+        authors: m.manga_creators?.map((c: any) => ({
+          id: c.creator?.isActive ? c.creator?.id : undefined,
+          slug: c.creator?.isActive ? c.creator?.slug : undefined,
+          name: c.creator?.isActive ? c.creator?.pen_name || c.creator?.name : 'Unknown creator',
+        })),
+        views: m.manga_total_views?.views || 0,
+        likes: m.manga_total_likes?.likes || 0,
+        subscriptions: m.manga_subscribers_aggregate?.aggregate?.count || 0,
+        latestChap: {
+          number: m.chapters?.[0]?.chapter_number,
+          id: m.chapters?.[0]?.id,
+        },
+        tags: m.manga_tags.map(({ tag }: any) => {
+          const r = {}
+          LANGUAGE.forEach((l) => {
+            const tagLanguage = tag.tag_languages.find((tl) => tl.language_id == l.id) || tag.tag_languages[0]
+            r[l.shortLang] = tagLanguage.value
+          })
+          return r
+        }),
+      }
+      LANGUAGE.forEach((language) => {
+        const l =
+          m.manga_languages.find((ml) => ml.language_id == language.id) ||
+          m.manga_languages.find((ml) => ml.is_main_language)
+        response[language.shortLang] = {
+          title: l ? l?.title : 'Unknown title',
+          description: l ? l?.description : 'Unknown description',
+        }
+      })
+      return response
+    })
+  )
+}
+export const getArtistArtworks = async (id: string) => {
+  return await axios
+    .get(`${getConfig().API_URL}/api/rest/public/creators/${id}/artworks?limit=99999&offset=0`)
+    .then((res) => res.data)
+}
+export const getArtistCollections = async (id: string) => {
+  const {data} = await axios.get(`${getConfig().API_URL}/api/rest/public/creators/${id}/launchpad`)
+  const launchpadData = data.launchpad
+  const count = data.launchpad.length
+  const launchpads = launchpadData?.map((launchpad: any) => {
+    LANGUAGE.forEach((l) => {
+      const launchpadLanguages =
+        launchpad.launchpad_i18ns.find((ml) => ml.i18n_language.id == l.id) ||
+        launchpad.launchpad_i18ns.find((ml) => ml.i18n_language.is_main)
+      launchpad[l.shortLang] = {
+        seo: {
+          title: launchpadLanguages?.data?.name,
+          description: launchpadLanguages?.data?.description,
+          thumbnail_url: launchpadLanguages?.data?.thumbnail_url,
+        },
+        name: launchpadLanguages?.data?.name,
+        description: launchpadLanguages?.data?.description,
+      }
+    })
+    return launchpad
+  })
+  return { launchpads: launchpads as Launchpad[], count }
+}
+export const getContests = async (id: string) => {
+  const res = await axios.get(`${getConfig().API_URL}/api/rest/public/creators/${id}/contests`)
+  return res?.data
 }